остановить застревание в затухании

#jquery

#jquery

Вопрос:

У меня есть два дива:

 <div id="small"></div>
<div id="big"></div>
 

Маленький действительно меньше и выше большого. z-индекс: 5;

jQuery: при наведении курсора на маленький он сходит с ума, потому что он выходит и входит в большой цикл. Поэтому я пытаюсь остановиться и убедиться, что он останавливается, когда он исчезает. Но есть момент, когда мышь быстро гаснет, она исчезает и больше не исчезает. Я не понимаю, почему?

   $("#big").hover(function(){
        $("#small").fadeIn();
    },function(){
        $("#small").fadeOut();
    }); 

    $("#small").hover(function() {
        $("#small").fadeIn().stop();
    }); 
 

Комментарии:

1. Не могли бы вы предоставить скрипку ?

Ответ №1:

Вы должны остановить это до того, как начнете исчезать:

  $("#small").stop().fadeIn();
 

Редактировать: я думаю, что то, что вам действительно нужно, — это этот код:

 $("#big").hover(function(){
    $("#small").stop().animate({opacity: 0.0}, 1000);
},function(){
    $("#small").stop().animate({opacity: 1.0}, 1000);
}); 

$("#small").mouseover(function() {
    $("#small").stop().animate({opacity: 1.0}, 1000);
}); 
 

Когда вы исчезнете из элемента, его пространство не будет сохранено, и над ним больше не будет событий наведения курсора мыши. Вместо этого вы можете анимировать его непрозрачность, добиваясь того же эффекта, но сохраняя пространство.

Живой тестовый пример.

Комментарии:

1. Ваше решение работает идеально! Большое вам спасибо. Просто из любопытства: я не понимаю, почему мое решение иногда застревает? Если я поставлю stop(); до или после fadeIn, это не имеет никакого значения. jsfiddle.net/WC5Uw

2. Если он останавливается в процессе затухания или затухания, он должен продолжаться при большом наведении курсора мыши или нет?

3. Ура, рад, что смог помочь! stop() остановится и ожидающая анимация (fadeIn на самом деле является анимацией), но она застревает из-за бесконечного цикла события мыши, вызванного каким-то образом — не уверен, как, хотя. В любом случае, если это решило ваше дело, пожалуйста, отметьте этот ответ как принятый, поставив галочку напротив пустого значка V слева.