Question

我有这个功能：

jQuery(document).ready(function ()
{
    jQuery('.current-visitors').delay(3000).queue(function ()
    {
        jQuery(this).addClass('show').delay(1000).queue(function ()
        {
            jQuery(this).removeClass('show');
        });
    });
});

所以我试图在3秒后添加一个类，效果很好。然后，我设置了一个新的延迟，并为删除该类的新方法排队，因此1秒钟后应该删除该类，但是最后一部分不起作用。怎么了？

Answer 1

您可以使用queue()方法来执行此操作，但是您使用了错误的链接方法，并且您忘记了对正在排队的每个函数调用dequeue()方法，因此，链被执行。

我稍微增加了隐藏元素的延迟，但是您可以在下一个代码段示例中检查它的工作情况：

jQuery(document).ready(function()
{
    jQuery('.current-visitors').delay(3000).queue(function()
    {
        console.log("Now visible!")
        $(this).addClass("show").dequeue();            
    })
    .delay(3000).queue(function()
    {
        console.log("Now hidden!")
        $(this).removeClass("show").dequeue();
    });
});

.current-visitors {
    background: lightblue;
    display: none;
}

.show {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="current-visitors">CURRENT VISITORS</div>

Answer 2

如果您需要简单的东西，我为您创建了一个简单的jQuery代码段：

jQuery.fn.wait = function(seconds){
    var element = this, deferred = jQuery.Deferred();
    setTimeout(function(){
        deferred.resolve.apply(element);
    }, seconds);

    return deferred;
}

jQuery(document).ready(function () {
    jQuery('.current-visitors').wait(3000).then(function () {
        jQuery(this).addClass('show').wait(1000).then(function () {
            jQuery(this).removeClass('show')
        });
    });
});

Answer 3

这也是最小的工作解决方案：

jQuery('.current-visitors').delay(3000).queue(function () {
        jQuery(this).addClass('show');

        setTimeout(function () {
            jQuery('.current-visitors').removeClass('show');
        }, 6000);
    });

jQuery添加和删除延迟链接的类不起作用

3 个答案: