Suppose we have an element for which animations are given for the hover event and for the click event.

According to the hover, we change the transparency of the element, by clicking it we collapse and collapse (fadeToggle).

To avoid the transparency changes that occur several times, we use stop () on every hover.

When we click on an element, it will start to hide and the hover will work (the mouse will leave the element one way or another) and stop () will work. That is, the animation of the collapsing element will stop.

How to avoid this situation? I tried to smash animations in 2 turns and stop only one of them. But something did not work for me, apparently different queues are executed sequentially.

Here is a simple implementation example http://cssdeck.com/labs/full/0tj1yo8p

  • Code can attach? - Zhukov Roman
  • Um, well, the code where I work is too big. This is just a small part of the functionality. Now I can do a pure example with such a problem. A little later lay out. - Blackmore
  • Attached ;-) Click on the div and move the mouse slightly. The animation will stop. - Blackmore

2 answers 2

Jsbin . Do you want to achieve this behavior?

$(document).ready(function(){ test = $('div.test'); test.on('mouseenter', function() { $(this).dequeue(); $(this).animate({'opacity':1}, 300); }); test.on('mouseleave', function() { $(this).dequeue(); $(this).animate({'opacity':0.3}, 300); }); test.on('click', function() { $(this).queue(function(){ $(this).slideToggle(1000); }); }); });
  • Not really, but thanks for the interesting example. I wanted to achieve behavior as below, only so that the mouse had no influence at all. Apparently you need to add another $ (this) .off ('mouseenter'); - Blackmore
  • In the example, @Deonis slideToggle stops if after the start of the folding the mouse has time to leave and go back to the div area. - Zhukov Roman
  • But no, it turns out that there the mouse event is disabled altogether. I need these events to be independent. That is, the change of transparency did not affect the animation of the collapse of the expansion. - Blackmore

Look here

 $(document).ready(function(){ test = $('div.test'); test.on('mouseenter',function() { $(this).stop().animate({'opacity':1}, 300); }); test.on('mouseleave',function() { $(this).stop().animate({'opacity':0.3}, 300); }); test.on('click', function() { $(this).off('mouseleave'); $(this).slideToggle(1000); }); });
  • So, but it turns out that if you once again expand the div, then it will not change the transparency when you hover? - Blackmore
  • one
    @Blackmore, such tasks are built on the basis of their specific structure and corresponding logic. In your example, if you turned the block, then it’s natural that you can’t move the cursor over it. So for the reverse action, there is another element that is responsible for this, and again the handler will be hung when it is deployed. - Deonis
  • I agree, it was necessary to finish an example. But I caught the point, thank you ;-) Now I will try with one more method, if I can, I will inform you. - Blackmore
  • one
    Here, maybe this example will be "closer to the body" - Deonis
  • Yes, exactly what you need ;-) - Blackmore