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)。这将停止正在进行的最终动画。</ p>

Answer 2

将不透明度发送到1，而不是“显示”。 “显示”可以使用当前最大不透明度作为淡入淡出的不透明度，因此如果它淡出并且当前不透明度为.5，则会通过淡入到.5显示它。

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

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

2 个答案: