Question

我看过其他例子，但找不到这样的例子：

我正在尝试做什么：单击“.box1”元素时，“.Wrapper”元素会更改背景颜色，然后在延迟（x）后，.Wrapper会恢复到之前的状态。（背景颜色是从名为'.clicked1'的类中添加的）

我现在的代码添加了'.clicked1'，但我无法弄清楚如何通过延迟删除该类。

任何帮助？

$(function () {
$('.box1').click(function () {
    $('.Wrapper').addClass('clicked1')
});
});

Answer 1

尝试使用.delay（）

$(function () {
    $('.box1').click(function () {
        $('.Wrapper').addClass('clicked1').stop().delay(2000).queue(function () {
            $(this).removeClass('clicked1')
        })
    });
});

演示：Fiddle

或使用setTimeout()

$(function () {
    $('.box1').click(function () {
        $('.Wrapper').addClass('clicked1');
        setTimeout(function(){
            $('.Wrapper').removeClass('clicked1');
        }, 2000)
    });
});

演示：Fiddle

Answer 2

请勿使用delay，setTimeout：

$('.box1').click(function () {
    $('.Wrapper').addClass('clicked1')
    setTimeout(function(){
        $('.Wrapper').removeClass('clicked1')
    }, 2000);
});

Answer 3

首先，存储对计时器的引用，然后缓存$（this）

(function() {
 var timer;
 $('.box1').click(function() {
   var el = $(this);

   el.addClass('clicked1');

   clearTimeout(timer);
   timer = setTimeout(function() {
       el.removeClass('clicked1');
   });

 });
}());

删除带延迟的类（）

3 个答案: