Question

我正在设计一个简单的jquery动画，所以当你点击一个图块时，它会通过隐藏所有其他图块并显示其信息来显示其信息。它的基本内容。我的问题存在于jquery的更深层核心，尽管我使用.stop（）来防止排队，但我不希望.stop（）在动画过程中转出tile并显示描述时才能运行。 / p>

我的代码分为3部分。 1st是一个mouseeneter，它改变不透明度以调整每个tile的不透明度，第二个是mouseleave，它将所有tile的不透明度更改为normal，或者如果鼠标进入另一个tile则调整其他tile。最后一个基本上是一个点击功能，如果你单击一个图块，它将淡出其他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

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

Answer 2

基本上，我不知道JQuery中存在不同的队列。默认的jqueue是＆＃34; fx＆＃34;当你做标准动画时，它基本上会实例化，例如＆＃34; .show＆＃34;或＆＃34; .hide＆＃34;。因此，当你想要能够做其他动画时，尽管有其他动画（在我的情况下也包括.stop），你可以像user1433150指出的那样建立你自己的队列。

基本上，在每个动画结束时，你需要＆＃34;创建＆＃34;一个队列：

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

然后在其他动画（和.stop）中，你应该确保它们影响或添加到＆＃39; hoverEvent＆＃34;这样你就可以同时执行单独的动画而不会相互干扰。

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

和

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

然后在我的功能的第一部分，在我＆＃34;创建＆＃34;一个队列，我需要将它出列以实际调用它。

$(otherBanners).dequeue();

然后在那之后，你会非常高兴。我的修改后的代码如下： function 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')
};

如何在某些情况下阻止.stop（）？

2 个答案: