jQuery mouseover mouseout opacity

Question

    function hoverOpacity() {
    $('#fruit').mouseover(function() {
        $(this).animate({opacity: 0.5}, 1500);
      });
    $('#fruit').mouseout(function() {
        $(this).animate({opacity: 1}, 1500);
      });
}

Это моя функция, которая оживляет div#fruit, и она работает.

Проблема заключается в следующем; Когда вы mouseout до завершения анимации mousein, она должна завершить анимацию до запуска mouseout. (надеюсь, что это имеет смысл)

Обычно это не заметно, но с большой продолжительностью это заметно.

Вместо завершения анимации я хочу, чтобы анимация остановилась и вернулась в исходное состояние.

Answer 1

Вы ищете функцию stop, за которой, возможно, следует show (или hide, или css, зависит от того, в каком состоянии вы хотите, чтобы opacity закончил) .

function hoverOpacity() {
    $('#fruit').mouseover(function() {
        $(this).stop(true).animate({opacity: 0.5}, 1500);
      });
    $('#fruit').mouseout(function() {
        $(this).stop(true).animate({opacity: 1}, 1500);
      });
}

true говорит анимации прыгать до конца. Если это единственная анимация на элементе, она должна быть в порядке; в противном случае, как я уже сказал, вы можете посмотреть на css, чтобы явно установить желаемую непрозрачность.

Отдельно можно использовать mouseenter и mouseleave вместо mouseover и mouseout по двум причинам: 1. mouseover повторяется, когда мышь перемещается по элементу, и 2. И mouseover, и mouseout bubble , и поэтому, если у вашего элемента "fruit" есть дочерние элементы, вы также будете получать события от них, что, как правило, дестабилизирует этот тип анимации.

Answer 2

Вам необходимо добавить вызов к .stop() перед тем, как анимировать, чтобы очистить текущую и любые анимации в очереди:

function hoverOpacity() {
    $('#fruit').mouseover(function() {
        $(this).stop(true).animate({opacity: 0.5}, 1500);
      });
    $('#fruit').mouseout(function() {
        $(this).stop(true).animate({opacity: 1}, 1500);
      });
}

Answer 3

Попробуйте это:

function hoverOpacity() {
    $('#fruit').mouseover(function() {
        $(this).stop(true, true).animate({opacity: 0.5}, 1500);
      });
    $('#fruit').mouseout(function() {
        $(this).stop(true, true).animate({opacity: 1}, 1500);
      });
}

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

Answer 4

попробуйте это также:

function hoverOpacity() {
    $('#fruit').hover(function() {
        $(this).animate({opacity: 0.5}, 1500);
    }, function() {
        $(this).animate({opacity: 1}, 1500);
    });
}