javascript – Track slideDown / Up events JQuery

Question:

There is a block. When you hover it, a hidden block with functionality appears in it. For display I am using slideDown / Up in JQuery. JS code:

$('li.block').hover(function () {
    $(this).find('div.info-block').slideDown();
}, function () {
    $(this).find('div.info-block').slideUp();
});

And I noticed this thing. If you often hover and move the cursor away from the block, then something that has not yet been executed, namely slideDown / Up, will be executed as many times as we hover. An example, for clarification – I point and remove quickly 10 times. Then I remove the cursor and until this block does slideDown / Up 10 times it will not stop.

Question. how can this be corrected?

Answer:

stop the previous animation before starting a new one

$('li.block').hover(function () {
$(this).find('div.info-block').stop().slideDown();
}, function () {
$(this).find('div.info-block').stop().slideUp();
});
Scroll to Top