单击时添加类,然后在延迟时删除类

时间:2014-11-27 03:15:26

标签: javascript

我希望在按下按钮时将类添加到类中,然后在几秒钟之后我希望删除该类。

到目前为止,我有按下按钮时添加类的代码:

$( ".overlay-close-button" ).click(function() {
    $( ".icon_holder" ).addClass('magictime tinRightIn');
});

删除课程的代码是什么?魔术时间tinRightIn'来自' icon_holder'在按钮类' overlay-close-button'之后让我们说2s之后点击了吗?

3 个答案:

答案 0 :(得分:1)

javascript中的

setTimeout或setInterval可能会起作用。例如:

$( ".overlay-close-button" ).click(function() 
{
    // problem: $( ".icon_holder" ) selects multiple elements!!!
    $( ".icon_holder" ).addClass('magictime tinRightIn'); 

    setTimeout(function()
    {
        $( ".icon_holder" ).removeClass('magictime tinRightIn');

    }, 2000);
});

答案 1 :(得分:1)

对@ymz回答略有修改。如果用户在2秒内点击,您可能希望取消之前设置的“setTimeout回调”。

var timeoutHandler = null;
$( ".overlay-close-button" ).click(function() 
{
    $( ".icon_holder" ).addClass('magictime tinRightIn'); 
    if (timeoutHandler) clearTimeout(timeoutHandler);

    timeoutHandler = setTimeout(function()
    {
        $( ".icon_holder" ).removeClass('magictime tinRightIn');

    }, 2000);
});

答案 2 :(得分:0)

您可以使用setTimeout()来实现这一目标。

setTimeout(function() { 
   $( ".icon_holder" ).removeClass('magictime tinRightIn');
}, 2e3);