是否可以向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類部分添加延遲？

回答

相關問題