jQuery 鼠标悬停鼠标悬停不透明度

Question

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

这是我为 div#fruit 制作动画的函数，它确实有效。

问题是这样的；当您在 mousein 动画结束之前mouseout 时，它必须在启动 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”元素有子元素，您也会从它们接收事件，这往往会破坏这种动画的稳定性。