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 冒泡，因此如果您的“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);
      });
}

这应该停止动画，清除队列（第一个arg）并跳到结尾（第二个arg），你可以根据需要改变/搞乱参数。

Answer 4

试试这个：

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