web-dev-qa-db-ja.com

遅延addclass / removeクラス関数が機能しない

私はここで何が間違っているのですか？

$(function() {
$('ul li:nth-child(1)').addClass("go").delay(4500).removeClass("go");
$('ul li:nth-child(2)').addClass("go").delay(1500).removeClass("go");
$('ul li:nth-child(3)').addClass("go").delay(500).removeClass("go");
$('ul li:nth-child(4)').addClass("go").delay(4500).removeClass("go");
$('ul li:nth-child(5)').addClass("go").delay(1000).removeClass("go");
});
jqueryaddclass
13
Bizarro Zeldman

追加するだけで、 .queue ：

$('ul li:nth-child(1)').addClass("go")
                       .delay(4500)
                       .queue(function() {
                           $(this).removeClass("go");
                           $(this).dequeue();
                       });
41
karim79

.delay()は、アニメーションでのみ機能するように設計されています。実行していることに対して、通常のsetTimeoutsを使用する必要があります。

var li = $('ul li:nth-child(1)').addClass('go');
setTimeout(function () {
    li.removeClass('go');
}, 4500);

すべての<li>に対してこれをもう少し快適にするために、次のようにコードをリファクタリングできます。

$(function () {
    var delays = [4500, 1500, 500, 4500, 1000];
    $('ul li').addClass('go').each(function (i) {
        setTimeout(function (li) {
            li.removeClass('go');
        }, delays[i], $(this));
    });
});
17
David Tang