jQuery mouseenter и mouseleave исчезают, чтобы предотвратить повторение с задержкой

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

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

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

См. jsfiddle .

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

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

Какие-либо предложения?


javascript jquery mouseenter mouseleave fadeto
person Truvia    schedule 07.06.2015    source источник
comment
jsfiddle.net/1Lrcubwp   -  person Khanh TO    schedule 07.06.2015

Ответы (2)


arrow_upward
2
arrow_downward

Пытаться:

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

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

https://jsfiddle.net/1Lrcubwp/

person Khanh TO    schedule 07.06.2015

arrow_upward
2
arrow_downward

Лучше использовать 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>

person Stefan Koenen    schedule 07.06.2015
comment
Хотя использование CSS в целом является предпочтительным вариантом для меня, и это хороший ответ, технически областью вопроса был javascript или jquery, поэтому другой ответ был отмечен как правильный, если кто-то посмотрит на это в будущем. Тем не менее, я, вероятно, собираюсь использовать эту версию! - person Truvia; 07.06.2015
comment
Кроме того, для всех, кто ищет это, если вы хотите использовать CSS для изменения непрозрачности другого элемента при наведении курсора на исходный div, объедините этот метод с этот ответ здесь - person Truvia; 07.06.2015