2

<div>我的网页上有两个 jQuery 效果。我animate()习惯左右移动它fadeTo()，当鼠标不在<div>.

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

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

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

我在stop()的 jQuery 文档中注意到了这一点：

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

这似乎是我的问题的解决方案！或者至少在我试图找出如何将fadeTo效果分配给命名队列之前它确实如此。通过使用animate() jQuery 文档animate()中指定的 options 参数，我可以很容易地了解如何执行此操作。但在fadeTo() jQuery 文档中似乎没有类似的东西。但这很奇怪，因为我可以在 for 、 和 for 的文档中看到指定此选项的能力。但为什么不呢？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);
    }
}
4

1 回答 1

1

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

function fadeElementTo(eid, speed, target-opacity) {
    $("#" + eid).animate({opacity: target-opacity}, {duration: speed, queue: false});
}
于 2013-06-09T16:28:47.637 回答