CODEWITHSUNDEEP
javascriptjquery
ray
ray

Reputation: 95

How to use .animate() in jquery

Hope you could check my code. Just want to animate. Toggle the top position of div tag with 'accordionHeader' class.

<script type="text/javascript">
  $(document).ready(function() {
    $(".accordionHeader").toggle(function() {
      $(".accordionHeader").animate({"top": "0 144px"}, 500);
      function(){
        $(".accordionHeader").animate({"top": "144px 0"}, 500);
      );
  });
</script>

Thank you so much.

Upvotes: 1

Views: 282

Answers (2)

ravithejag
ravithejag

Reputation: 608

you can try this on click event

 $('.accordionHeader').animate({ position: 'relative', top: '144px' }, 500);

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

you mean:

$(document).ready(function(){
   $(".accordionHeader").toggle(
     function(){
        $(".accordionHeader").animate({"top": "144px"}, 500);
     },
     function() {
        $(".accordionHeader").animate({"top": "-144px"}, 500);
     });
});

As an alternative, since jQuery.toggle() is deprecated, you could also do:

$(".accordionHeader").on("click", function() {
    var clicked = $(this).data('clicked');
    if (clicked) {
        $(".accordionHeader").animate({"top": "144px"}, 500);
    }
    else {
        $(".accordionHeader").animate({"top": "-144px"}, 500);
    }
    $(this).data("clicked", !clicked);
});

Upvotes: 1

Related Questions