是否可以向toggleClass的remove类部分添加延迟？

是否可以向toggleClass的remove类部分添加延迟？是否可以向toggleClass的remove类部分添加延迟？

在小提琴中，我想红色的div在点击时立即变绿。但当再次点击时，它应该延迟回到红色。

http://jsfiddle.net/simbasounds/ggk8xxya/1/

HTML

<div class="container"> 
    I am a div 
</div>

CSS

.container { 
    padding: 10px; 
    background: red; 
} 

.container.green { 
    background: green; 
}

jQuery的

$(".container").click(function(){ 
    $(this).toggleClass('green'); 
});

来源

2015-09-08 simbasounds

你为什么不使用CSS3动画用的时间？看起来像多一点工作，但不那么hacky – Alex

http://api.jquery.com/toggleclass/。 'toggleClass'可以接受一个函数和一个状态，所以你可以自己写。 – putvande

@simbasounds ...在从绿色转换为红色或者仅仅是简单的时间延迟时，延迟效果就像你想要的那样淡入淡出效果？ –

对于简单的时间延迟，同时从绿色转变为红色

$(".container").click(function(){ 
    var $element = $(this); 

    //check if element has green class --> remove green class with a delay 
    if ($element.hasClass('green')) { 
    var delay = 1000; //ms 
    setTimeout(function(){ 
     $element.removeClass('green'); 
    },delay); 
    } 
    // element doesn't have green class --> add it 
    else { 
    $element.addClass('green'); 
    } 
});

fiddle

来源

2015-09-08 10:55:30

非常好，谢谢bhavya_w – simbasounds

显而易见的方式呢？

$(".container").click(function(){ 
    if ($(this).hasClass('green')) { 
    // add your delay here 
    } 
    else { 
    $(this).toggleClass('green'); 
    } 
});

来源

2015-09-08 10:45:25 lex82

这看起来很不错，谢谢@ lex82。 – simbasounds

是否可以向toggleClass的remove类部分添加延迟？

回答

相关问题