jquery - jQuery 添加类，等待，然后更改该类？

Question

我需要在单击元素时添加一个类（例如转换），然后等待 1 秒并更改该类（例如完成转换）。

我试过这个：

$(this).addClass('transition').delay(1000).addClass('active');

更新 - 为什么以下不起作用？当我取消注释警报时，我可以看到它在正确的时间触发addClass并被removeClass忽略。

$('.target').click(function() {

    $(this).addClass('transition'); 

    $('.target').not(this).removeClass('active transition');

    setTimeout(function(){  
        $(this).removeClass('transition');
        $(this).addClass('active');
        //  alert('test');
    },300);

});

Answer 1

$('p').css('color', 'red').delay(1000).queue(

function (aaa)
{
   $(this).css('color', 'green');
   $(this).dequeue(); //<---- or  aaa();  , will work also
}).Continue...

示例：http: //jsbin.com/ocOkIfA/2/edit

看这里 jquery ：

默认情况下，您可以为其添加延迟的队列仅适用于 FX。

设置 css 道具不是动画 - 因此它不使用队列。

这就是我们所做的。

Answer 2

您可以使用 setTimeout()，如下所示：

$('.target').click(function () {
    var $target = $(this);

    $target.addClass('transition');

    $('.target').not(this).removeClass('active transition');

    setTimeout(function () {
        $target.removeClass('transition').addClass('active');
    }, 1000);
});

jsfiddle

我认为您的代码的问题是您试图$(this)在传递给 setTimeout() 的函数中使用，但在该函数this中不引用该元素。上面的代码通过定义$target变量来避免这种情况。

修复代码的另一种方法是使用该$.proxy()函数为回调函数设置上下文，如下所示：

$('.target').click(function () {
    $(this).addClass('transition');

    $('.target').not(this).removeClass('active transition');

    setTimeout($.proxy(function () {
        $(this).removeClass('transition').addClass('active');
    }, this), 1000);
});