jQuery - Change animation speed after click

[PloMar]

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.

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