Question

在.click（function（）{}）中;我正在尝试删除一个类，添加另一个，延迟一秒，然后再反转一切。这对我来说似乎很简单，但我对这个破碎的功能感到难过：

$(document).ready(function() {
    var items = $(".tabs-group .sidebar ul li:not(:last-child) a");
    var prompt = $(".prompt-button");
    prompt.click(function () {
        $(items).removeClass("pulse").addClass("solid").delay(1000).removeClass("solid").addClass("pulse");
    });
});

帮助表示感谢，谢谢！

Answer 1

尝试将后续操作放入队列中。否则removeClass，addClass不会被添加到FX队列，以通过直接应用延迟来延迟它。

$(items).removeClass("pulse").addClass("solid").delay(1000).queue(function(){
                               $(this).removeClass("solid").addClass("pulse");
});

你可以这样做：

$(items).toggleClass("pulse solid").delay(1000).queue(function(){
                               $(this).toggleClass("pulse solid");
});

Answer 2

尽管PSL answer可能是最好的解决方案，但这里有另一种选择。您可以创建自己的延迟函数，因为.delay()仅适用于排队元素。

这是一个例子：

(function($){
    if($ && !$.fn.wait){
        $.fn.wait = function(time, fn){
            setTimeout(fn.bind(this), time);
            return this;
        }
    }
})(jQuery)

在您的文件中插入后，您可以这样称呼它：

$(items).removeClass("pulse").addClass("solid").wait(1000, function(){
     this.removeClass('solid');
})

See the code in action

Answer 3

你有额外的$ in项目

$(document).ready(function() {
    var items = $(".tabs-group .sidebar ul li:not(:last-child) a");
    var prompt = $(".prompt-button");
    prompt.click(function () {
        items.removeClass("pulse").addClass("solid").delay(1000).removeClass("solid").addClass("pulse");
    });
});

如何使用延迟来添加/删除类

3 个答案: