javascript - JQuery 添加和删除延迟链接的类不起作用

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>