Adding animations with addClass in jQuery

Question

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

I can not understand where is the question, the code seems fine — Hyyan Abo Fakher
– Hyyan Abo Fakher, Commented Sep 4, 2017 at 12:45
I would like to add an animation effect to the above code so that when #menu-item-504 is cliked .home-search-box appears with an animated effected rather than just showing. — user38208
– user38208, Commented Sep 4, 2017 at 12:47
what kind of animation are you looking for on search box sticking on top? not able to understand what you are looking for! — RaJesh RiJo
– RaJesh RiJo, Commented Sep 4, 2017 at 13:04
you must share some relevant html or fiddler for sure. otherwise its very difficult to get what is your expectation. — RaJesh RiJo
– RaJesh RiJo, Commented Sep 4, 2017 at 13:11

RaJesh RiJo · Accepted Answer · 2017-09-04 15:33:54Z

1

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>

answered Sep 4, 2017 at 15:33

RaJesh RiJo

4,4005 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user38208 Over a year ago

Yes this is what i was looking for. Thanks

Collectives™ on Stack Overflow

Adding animations with addClass in jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related