Forum

Posted: **28 Jan 2015, 11:55**

I use this code to animate position of a Div when is hovered. I move it with 2500 animation speed.
How do I change speed of this animation to 800, when #dv is clicked?
This is the code:

Code: Select all

<div id="dv">Animate Div</div>
<script>$('#dv').hover(function(){
  $(this).animate({left: '80%'}, 2500);
});
</script>

We should get:
- 2500 animation when #dv is hovered.
- 800 when it is clicked.

The Div can be already animated, when we try to click on it. So, how to change its speed?
Thanks.

Posted: **28 Jan 2015, 12:36**

Try with the dequeue() function (Execute the next function on the queue for the matched elements).

Code: Select all

<div id="dv">Animate Div</div>
<script>
$('#dv').hover(function(){
  $(this).animate({left: '80%'}, 2500);
}).click(function() {
  $(this).dequeue().animate({left: '80%'}, 800);
});
</script>

Demo (hover then click on the blue rectangle).

Animate Div

Forum

jQuery - Change animation speed after click

jQuery - Change animation speed after click

jQuery - Change animation speed after click