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 泡沫,所以如果你的"果"元素有子元素,你"我也会接收来自他们的事件,这往往会破坏这种动画的稳定性.

Answer 2

尝试这个：

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);
      });
}

这应该停止动画，清除队列（第一个参数）并跳转到末尾（第二个参数），您可以根据需要更改/弄乱参数。