jQuery mouseover mouseout不透明度

这是我的函数，它可以为div#fruit设置动画，并且可以正常工作

问题是,；如果在

mousein

动画完成之前执行

mouseout

，则必须在启动

mouseout

之前完成动画。（希望有道理）

这通常是不明显的，但持续时间长，它是明显的

我希望动画停止并反转到原始状态，而不是完成动画。

尝试以下操作：

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

---

这将停止动画，清除队列（第一个arg）并跳到末尾（第二个arg），您可以根据需要更改/处理参数。

在设置动画以清除当前动画和任何排队动画之前，您需要添加对

.stop（）

的调用：

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

您正在查找函数，后面可能是

show

（或

hide

，或

css

，这取决于您希望

opacity

以什么状态结束）

true

告诉动画跳到末尾。如果这是元素上的唯一动画，则应该可以；否则，正如我所说，您可以查看

css

来显式设置所需的不透明度

但是，您可以单独考虑使用

mouseenter

和

mouseleave

而不是

mouseover

和

mouseout

，原因有二：1

mouseover

在鼠标在元素上移动时重复，2。

mouseover

和

mouseout

都会冒泡，因此如果您的“水果”元素有子元素，您也会从它们那里接收事件，这往往会破坏此类动画的稳定性。

请尝试以下方法：

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

---

@a-second-mix：另请参阅关于可能为此使用不同事件的说明。感谢各位的回复。停止功能使我进入下一页，这正是我所需要的：

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

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