CODEWITHSUNDEEP
javascriptjqueryeffectsjquery-effects
starbucks
starbucks

Reputation: 3016

How do I slow down this JQuery effect?

Code: 

    <script>
$(document).ready(function() {

  $('.sync_box').on('click', function(e){
    e.preventDefault();
    var $btn = $(this);
    $btn.toggleClass('opened');

    var heights = $btn.hasClass('opened') ? 300 : 100 ;
    $('.sync_box').stop().animate({height: heights });
  });
});
    </script>

Where in this script can I add time to slow it down? i am sure this is obvious but i am new to jquery/js so a bit puzzled. Please help. Thanks!

Upvotes: 0

Views: 367

Answers (2)

user2697615
user2697615

Reputation: 

<script>
$(document).ready(function() {

  $('.sync_box').on('click', function(e){
    e.preventDefault();
    var $btn = $(this);
    $btn.toggleClass('opened');

    var heights = $btn.hasClass('opened') ? 300 : 100 ;
    $('.sync_box').stop().animate({height: heights },2000);
  });
});
</script>

Edited example above. The 2000 is milliseconds.

Reference http://api.jquery.com/animate/

Upvotes: 2

Diomedes Andreou
Diomedes Andreou

Reputation: 385

$('.sync_box').stop().animate({ height: heights }, TIME_IN_MS);

There buddy.

Be sure to check jquery animate api here.

Upvotes: 1

Related Questions