使用 jQuery .stop() 仅停止 .fadeTo() 效果答案

【问题标题】：Using jQuery .stop() To Stop Only the .fadeTo() Effect使用 jQuery .stop() 仅停止 .fadeTo() 效果
【发布时间】：2013-06-07 00:03:59
【问题描述】：

我的网页上有两个带有<div> 的jQuery 效果。我用animate()左右移动它，当鼠标不在<div>上时我用fadeTo()淡出它。

如果鼠标在<div> 上快速来回移动，我想使用jQuery stop() 函数来防止多重淡出效果，如下所示：

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

不幸的是，如果我这样做了，它也会停止我的动画，这是我从来不想要的。如果我开始动画，我总是希望它完成。 我怎样才能做到这一点，同时防止闪烁褪色问题？

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

从 jQuery 1.7 开始，如果第一个参数作为字符串提供，则只有该字符串表示的队列中的动画会停止。

这似乎解决了我的问题！或者至少在我试图找出如何将fadeTo 效果分配给命名队列之前它确实如此。通过使用animate() jQuery documentation 中指定的选项参数，我可以轻松了解如何使用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);
    }
}

【问题讨论】：

请显示有问题的代码。
@RokoC.Buljan - 完成。
这里有点重复：stackoverflow.com/questions/4949784/…
@ChrisA - 是的，我在发布我的问题之前就看到了这个问题。不过，正如我所提到的，我已经知道使用队列来停止动画效果。我想知道的是如何使用它们来阻止褪色效果。我觉得肯定有办法，因为stop()函数会停止动画和淡入淡出效果。
我的问题不是重复的！ other SO question that has been referenced 解决了一个不同的问题。请在投票关闭之前仔细阅读我的问题！我明确声明使用stop() 停止动画与使用stop() 停止淡入淡出效果（并且仅是淡入淡出效果）是不同的问题。

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：