Searchbox animation

Change class name on click in jQuery

by RaviMakwana

HTML

<div id="banner-message">
  <p>Hello World</p>
  <label></label>
  <input class="form " />
  <button>
     Search
  </button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}


@keyframes acidTrip {
  from {
    filter: hue-rotate(0deg);
    width:0px;
  }
  50% {
    filter: hue-rotate(360deg);
  }
  to {
    filter: hue-rotate(0deg);
    width:100px;
  }
}

.acidTrip {
  animation-name: acidTrip;
  color: white;
  background-image: linear-gradient(50deg, purple, orange);
  width:100px;
  background-attachment: fixed;
  background-clip: text;
  text-fill-color: transparent;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
.acidTrip:after {
  content:"x";
}

JavaScript

// find elements

var input = $("input")
var label = $("label")
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
  input.addClass("acidTrip")
  label.html()
})

 $(document).ready(function() {
 
    $('input').keyup(function () {
        $("#" + table_id).DataTable().search(''); //clear main searchbox
        $(this).siblings("i.clscloseIcon").removeClass('hidden');
        Filterstatus = "";
        FilterTitle = "";
        if (this.value.length > 0) {
            isTyping = true;
            setTimeout(function () {
                if (isTyping) {
                    isTyping = false; // stop typing for moment
                    setTimeout(function () {
                        if (!isTyping) { // check after moment
                            isTyping = true; // ignor mutiple threads
                            $("#" + table_id).DataTable().ajax.reload();
                        }
                    }, 1000);
                }
            }, 500);
        }
        else {
            $(this).siblings("i#fltcloseIcon").addClass('hidden');
            $("#" + table_id).DataTable().ajax.reload();
        }
    });
    
 })