Question

我的网页上有<div>的两个jQuery效果。我使用animate()向右和向左移动，当鼠标悬停在fadeTo()上时，我使用<div>将其淡出。

我想使用jQuery stop()函数来防止多次淡入淡出效果，如果鼠标快速地在<div>上来回移动，就像这样：

$("myDiv").stop().fadeTo(speed, opacity, callback);

不幸的是，如果我这样做，那么它也会停止我的动画，这是我从未想过的。如果我开始动画，我总是希望它完成。 如何实现这一点，同时防止闪烁的褪色问题？

我在jQuery documentation for stop()中注意到了这一点：

从jQuery 1.7开始，如果第一个参数是作为字符串提供的，那么只有该字符串所代表的队列中的动画才会被停止。

这似乎解决了我的问题！或者至少它确实发生过，直到我试图找出如何将fadeTo效果分配给命名队列。通过使用animate() jQuery documentation中指定的options参数，我可以使用animate()轻松查看如何执行此操作。但它看起来并不像fadeTo() jQuery documentation中有类似的东西。但这很奇怪，因为我可以在fadeIn()，fadeOut()和fadeToggle()的文档中看到指定此选项的功能。但为什么不fadeTo()？

我在这里遗漏了什么吗？或者还有其他方法可以实现我的目标吗？

<小时/> 修改：以下是我的代码的简化版本，以帮助说明我的问题。

<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="div4">
            </div>
        </div>
    <button id="myButton" onclick="doACoolAnimation()" ></button>
    </div>
</div>

我使用这个JavaScript来完成淡入淡出：

$('#div1').mouseenter(function() {
    fadeElementTo('div1', 500, 1);
}).mouseleave(function() {
    fadeElementTo('div1', 500, 0.5);
});

我的fadeElementTo()功能非常简单：

function fadeElementTo(eid, speed, opacity, callback) {
    $("#" + eid).stop().fadeTo(speed, opacity, callback);
}

单击我的按钮时，只需向左或向右移动即可为与div相同的function doACoolAnimation() { var hiddenState = GLOBAL_VAR.hiddenState; // If the <div> is already hidden, make it visible if (hiddenState == null || hiddenState == 1) { GLOBAL_VAR.hiddenState = 0; $("#div1").animate({ left: "0px" }, 1500); } // Otherwise, hide it else { GLOBAL_VAR.hiddenState = 1; $("#div1").animate({ left: "-800px" }, 1500); } }设置动画。

{{1}}

Answer 1

您可以尝试使用带有queue：false的animate函数来设置不透明度的动画，而不是在悬停时使用fadeTo函数。

function fadeElementTo(eid, speed, target-opacity) {
    $("#" + eid).animate({opacity: target-opacity}, {duration: speed, queue: false});
}

使用jQuery .stop（）仅停止.fadeTo（）效果

1 个答案: