jQuery ошибка остановки затухания: jQuery (". box"). stop (). fadeIn ();

Question

Этот код не работает, что я делаю не так?

Tnks.

 var x;
    x=jQuery(document);
    x.ready(inicializarEventos);

    function inicializarEventos()
    {
      var x;
      x=jQuery(".Caja2");
      x.hover(entraMouse,saleMouse);
    }


    function entraMouse()
    {
      jQuery(".Caja2").stop().fadeOut();
    }

    function saleMouse()
    {
      jQuery(".Caja2").stop().fadeIn();
    }

Answer 1

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

Когда вы вызываете $().fadeOut(), происходит то, что jQuery анимирует замирание, а затем устанавливает display: none для этого элемента. Поскольку элемент затем удаляется из списка отображения, вызывается событие mouseOut, которое, конечно, затем начинает эффект fadeIn (). Это приводит к бесконечному циклу событий mouseIn и mouseOut, пока ваша мышь находится в этой области.

Возможно, вы захотите попробовать метод $().fadeTo(). В следующем примере я анимирую свойство opacity до 0,0, когда мышь входит, и обратно до 1,0, когда мышь уходит. Поскольку элемент никогда не бывает скрытым (просто невидимым), событие mouseOut может срабатывать правильно.

jQuery(document).ready(inicializarEventos);

function inicializarEventos() {
    $(".Caja2").hover(entraMouse, saleMouse);        
}

function entraMouse() {
    jQuery(this).fadeTo("slow", 0.0)
}

function saleMouse() {
    jQuery(this).fadeTo("slow", 1.0)
}

В будущем я бы предложил объяснить, почему вы думаете, что «код не работает». Вы должны определить, как вы ожидаете, что код будет функционировать, и каков текущий результат. Это поможет мне другим лучше узнать, как ответить на ваш вопрос.

Answer 2

Dreas Grech из комментариев является правильным. Вам нужно проверить, анимируется ли элемент, прежде чем вызывать для него метод .stop () Попробуйте это:

function entraMouse() { jQuery(".Caja2:animated").stop();jQuery(".Caja2").fadeOut(); }
function saleMouse() {jQuery(".Caja2:animated").stop();jQuery(".Caja2").fadeIn(); }