Jquery 是否可以仅向toggleClass的remove class部分添加延迟？

是否可以仅向toggleClass的remove class部分添加延迟

在小提琴中，我希望红色div在单击时立即变为绿色。 但当再次单击时，它会延迟返回红色

HTML

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

jQuery

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

---

那么显而易见的方式呢

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

---

用于从绿色转换为红色时的简单延时

$(".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');
   }
});

---

为什么不使用带有时间的css3动画？看起来工作多了一点，但没那么烦人

toggleClass

可以接受一个函数和一个状态，这样你就可以自己编写了。@simbasounds…当从绿色转换为红色时，是否需要fadeEffect中的延迟，或者只是一个简单的延时？@bhavya_w简单的延时，没有褪色。@Alex的建议行得通。我没有想到只向.container.green添加CSS转换。

$(".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');
   }
});