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 prop不是动画 - 因此它不使用队列。

这就是我们所做的。

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

我认为您的代码的问题在于您尝试在传递给setTimeout（）的函数中使用$(this)，但在该函数内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);
});