jQuery mouseenter и mouseleave fadeTo предотвратить замедленное повторение

Question

Итак, у меня есть div, который затухает на мыши, входя в и вниз на mouseleave, который отлично работает.

$('.myDiv').mouseenter(function(){ 
$(this).fadeTo('slow', 1); 
}); 

$('.myDiv').mouseleave(function(){ 
$(this).fadeTo('slow', 0.4); 
}); 

См. jsfiddle.

Однако, если вы быстро переместите мышь и снова и снова несколько раз, div будет «мигать» по мере продолжения анимации. Есть ли способ остановить это?

Я пробовал обратные вызовы, но не получил желаемого эффекта.

Любые предложения?

Answer 1

Try:

$('.myDiv').mouseenter(function(){ 
    $(this).stop(); 
    $(this).fadeTo('slow', 1); 

}); 
$('.myDiv').mouseleave(function(){ 
    $(this).stop(); 
    $(this).fadeTo('slow', 0.4); 
}); 

https://jsfiddle.net/1Lrcubwp/

Answer 2

Лучший способ заключается в использовании CSS. Javascript не должен использоваться для такой анимации, так как это сделает ваш сайт медленным. См. Мой пример ниже.

.fade { 
 
     background-color: red; 
 
    width: 200px; 
 
    height: 200px; 
 
    opacity: 0.4; 
 
    filter: alpha(opacity=40); /* For IE8 and earlier */ 
 
    transition: opacity .25s ease-in-out; 
 
    -moz-transition: opacity .25s ease-in-out; 
 
    -webkit-transition: opacity .25s ease-in-out; 
 
    cursor: pointer; 
 
    } 
 

 
    .fade:hover { 
 
     opacity: 1; 
 
     }

<div class='fade'></div>