jquery - 如何防止悬停动画最终消失

Question

我有用于图像悬停的代码，当悬停时将在图像顶部显示信息。通过在回调中使用 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/

谢谢

Answer 1

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

Answer 2

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

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