CODEWITHSUNDEEP
javascriptjquery
user38208
user38208

Reputation: 1094

Adding animations with addClass in jQuery

I am trying to add an animation effect to the jQuery code below when the class home-search-fixed is either added or removed to so that div home-search-box animates in or out

$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 180) {
    $("#menu-item-504").click(function (evt) {
        $(".home-search-box")
        .addClass("home-search-fixed");
         evt.preventDefault();
    });
    } else {
 $(".home-search-box")
        $(".home-search-box")
        .removeClass("home-search-fixed");

 }

Fiddle

Upvotes: 0

Views: 51

Answers (1)

RaJesh RiJo
RaJesh RiJo

Reputation: 4412

Am not sure, what you are expecting can be possible. Because you are looking for animating positioned div from initial to fixed. I just tried something through css transition to achieve what you are looking for. Have a look on below snippet.

$("#menu-item-504").click(function() {
  $(".home-search-box").addClass("home-search-fixed");
});
body {
  height: 3000px;
}

#menu-item-504 {
  height: 20px;
}

.home-search-box {
  background: red;
  transition: all 2s ease;
  height: 50px;
  position: initial;
  top: 30px;
}

.somediv .home-search-fixed {
  position: fixed;
  top: 100px;
  height: 200px !important;
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-504" class="header-avail menu-item menu-item-type-custom menu-item-object-custom menu-item-504" style="display: inline-block !important;"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Check Availability</span></a></li>
<div class="somediv">
  <div class="home-search-box">
    some content here
  </div>
</div>

Upvotes: 1

Related Questions