在某些情况下如何防止.stop()？

Question

我正在设计一个简单的jquery动画，所以当您单击一个瓷砖时，它通过隐藏所有其他瓷砖并显示其信息来显示它的信息。基本的东西。我的问题存在于jquery的更深层核心中，尽管我使用.stop()来阻止排队，但我不希望.stop()在动画转换并显示描述时发挥作用。

我的代码分为3部分。第一种是改变不透明度以调整每个瓷砖的不透明度，第二种是将所有瓷砖的不透明度改变为正常，或在鼠标进入另一块瓷砖时调整其他瓷砖的不透明度。最后一个基本上是一个点击功能，如果你点击一个瓷砖，它将淡出其他4，并显示产品说明。第三部分是事情变得棘手的部分。第一部分中的.stop()函数是在单击鼠标时干扰动画的，如果您的鼠标恰好在动画过程中碍事。我不知道如何补救这个问题。

function bannerFader(currentBanner, otherBanners, expandButton, appendInfo){
var disableHover = false;
    $(currentBanner).mouseenter(function(){
        if (disableHover == false) {
            $(otherBanners).stop(true);
            $(otherBanners).fadeTo(100, .8);
        }
    });
    $(currentBanner).mouseleave(function(){
        if (disableHover == false) {
            $(otherBanners).fadeTo(100, 1);
        };
    });
    $(expandButton).click(function(){
        disableHover = true;
        $(otherBanners).hide(200, function(){
            $(appendInfo).show(300);
        });
    });
}

function autoRunner() {
    bannerFader('.banner-one', '.banner-two, .banner-three, .banner-four, .banner-five', '.banner-one','.append-one')
    bannerFader('.banner-two', '.banner-one, .banner-three, .banner-four, .banner-five', '.banner-two','.append-two')
    bannerFader('.banner-three', '.banner-two, .banner-one, .banner-four, .banner-five', '.banner-three','.append-three')
    bannerFader('.banner-four', '.banner-two, .banner-three, .banner-one, .banner-five', '.banner-four','.append-four')
    bannerFader('.banner-five', '.banner-two, .banner-three, .banner-four, .banner-one', '.banner-five','.append-five')
};

基本上，我希望一切都能像它一样工作，只是不需要.stop()来干预转换。你可以在这里找到我的问题的一个例子：

http://rockforddriveline.com/newrdl/index.html

Answer 1

基本上，我不知道JQuery中存在不同的队列。默认的jqueue是"fx“，当您执行".show”或".hide“这样的标准动画时，它基本上是实例化自己。因此，当您想要在其他动画(在我的例子中也包括.stop)之外进行其他动画时，您可以像user1433150所指出的那样创建您自己的队列。

基本上，在每个动画的末尾，您需要“创建”一个队列：

$(otherBanners).fadeTo(200, .8).queue(null,'hoverEvent');

然后，在其他动画(和.stop)中，您应该确保它们影响或添加到“hoverEvent”中，以便您可以同时执行单独的动画，而不会相互干扰。

$(otherBanners).stop('hoverEvent',true);

以及：

$(otherBanners).fadeTo(200, 1).queue('hoverEvent');

然后，在我的函数的第一部分，在我“创建”了一个队列之后，我需要把它排掉才能真正调用它。

$(otherBanners).dequeue();

在那之后，你就可以走了。修改后的代码如下:函数bannerFader(currentBanner，otherBanners，expandButton，appendInfo){

var disableHover = false;

    $(currentBanner).mouseenter(function(){
        if (disableHover == false) {
            $(otherBanners).stop('hoverEvent',true);
            $(otherBanners).fadeTo(200, .8).queue(null,'hoverEvent');
            $(otherBanners).dequeue();
        }
    });
    $(currentBanner).mouseleave(function(){
        if (disableHover == false) {
            $(otherBanners).fadeTo(200, 1).queue('hoverEvent');
        };
    });
    $(expandButton).click(function(){
        disableHover = true;
        $(otherBanners).hide(200, function(){
            $(appendInfo).show(300);
        });
    });
}

function autoRunner() {
    bannerFader('.banner-one', '.banner-two, .banner-three, .banner-four, .banner-five', '.banner-one','.append-one')
    bannerFader('.banner-two', '.banner-one, .banner-three, .banner-four, .banner-five', '.banner-two','.append-two')
    bannerFader('.banner-three', '.banner-two, .banner-one, .banner-four, .banner-five', '.banner-three','.append-three')
    bannerFader('.banner-four', '.banner-two, .banner-three, .banner-one, .banner-five', '.banner-four','.append-four')
    bannerFader('.banner-five', '.banner-two, .banner-three, .banner-four, .banner-one', '.banner-five','.append-five')
};

Answer 2

这就是拥有独立队列的能力所在。将mouseenter/mouseleave触发动画放在一个单独的队列中。然后，当调用stop(true) ( true的第一个参数清除队列)时，它不会干扰单击动画。使用animate并在options参数中传递队列名，然后将相同的队列传递给stop，如下面的stop('myqueue', true)