如何防止悬停动画最终消失答案

【问题标题】：How to prevent hover animations from eventual disappearance如何防止悬停动画最终消失
【发布时间】：2011-09-08 17:25:52
【问题描述】：

我有一个图像悬停代码，当悬停在图像顶部时，它会在图像顶部显示信息。通过在回调中使用 queue:false，当用户多次将鼠标悬停在动画上时，我已经阻止动画反复触发。

我的问题是，如果有人对 mouseOverING 有点疯狂，则悬停状态的淡入/淡出会降低信息的不透明度，直到悬停图像不再可见。

$('.image').hover(function() {
    $('.linkWords', this).animate({
        opacity: "show"
    }, {
        queue: false
    });
}, function() {
    $('.linkWords', this).animate({
        opacity: "hide"
    }, {
        queue: false
    });
});

这是我的 jsfiddle，如果你想玩的话。

http://jsfiddle.net/bkbarton/qrprD/

谢谢

【问题讨论】：

标签： jquery image jquery-hover overlay-icon-disappear

【解决方案1】：

在开始下一个动画之前在元素上尝试.stop(true)。这将停止正在进行的最终当前动画。

【讨论】：

Wulf - 你建议我将 .stop(true) 放在 .hover() 函数中的第一个 .animate 还是第二个？我都试过了，他们都没有解决我的问题。如果用户在两个悬停区域之间连续快速移动，悬停图像仍然会缩小到不可见。
经过一番研究，我发现你是对的。除了添加一个额外的 true 使效果正常工作。 .stop(true, true)...
没错，第一个 true 停止当前正在运行的动画，第二个 true 将它们带到最终状态。对于我的动画来说，最好只是停止它们，但如果它没有用就不会有第二个参数;）如果它对你有帮助，请接受我的回答。

【解决方案2】：

将不透明度设置为 1，而不是“显示”。 “显示”可以使用当前的最大不透明度作为要淡入的不透明度，所以如果它正在淡出并且当前的不透明度为 0.5，它将通过淡入到 0.5 来显示。

$('.image').hover(function() {
    $('.linkWords', this).animate({
        opacity: 1
    }, {
        queue: false
    });
}, function() {
    $('.linkWords', this).animate({
        opacity: "hide"
    }, {
        queue: false
    });
});

【讨论】：