用動畫刪除CSS類

Question

我正在創建一個表格，我想突出顯示特定的一行。

我這樣做是使用：

$this.css('background-color', 'green');

$this.delay(3000).animate({ backgroundColor: $color }, 3000);

$this = the row in question.

$color = the previous row color.

但是我希望它與css類一起工作，所以像這樣

$this.addClass('highlight');

.highlight類僅具有background-color 。

問題是，在我添加了類之后，我無法使用background-color 。

如果我使用：

$this.delay(3000).animate({ backgroundColor: $color }, 3000);

它似乎不起作用，因為它沒有覆蓋.highlight類本身的background-color屬性。 而且我不明白的方式來動態顯示removeClass方法甚至switchClass從.highlight到'' 。

有什么解決方案我不打算這樣做。

提前致謝。

Answer 1

請改用CSS過渡。 性能更好，更簡單。

小提琴的例子

transition:background-color 0.3s linear;

盡管顯然，這並沒有為動畫提供太多的瀏覽器支持。

Answer 2

您可以使用jQuery UI的.switchClass動畫所有樣式更改： .switchClass

突出顯示完成后，使用回調將其切換回原來的狀態。

$('div').click(function() {
    $(this).switchClass( "normal", "color", 1000, "easeInOutQuad", function(){
        $(this).delay(3000).switchClass( "color", "normal", 1000, "easeInOutQuad" );
});

}）;

在這里擺弄我！

Answer 3

.animate（）函數可使用“數字”屬性，例如：高度，寬度，左側等。但不適用於背景色。

您可以嘗試以下方法：

$(document).ready( function() {
$('tr.normal').on('click', function() {
   $(this)
   .hide()
   .delay(3000)
   .fadeIn('slow')
   .toggleClass('highlight');
   });             
 });

Answer 4

您可以使用jQuery的addClass和removeClass，請考慮：

if($(document).scrollTop() > 250)
{    
$('#div').addClass("show");
}
else
{
$('#div').removeClass("show");
}
});

這樣做是用div類“ show”替換原始類，例如“ hide”，當用戶向下滾動頁面250px時，此特定代碼段顯示標題。

請記住，如果您使用的是這段代碼，那么使用CSS3過渡效果更好（更流暢），除非您考慮的是瀏覽器用戶不支持此功能，例如IE8-。

編輯：我剛剛意識到您這樣做的原因是因為您正在考慮IE7用戶。 完善。 我實際上只是自己解決了這個問題。

我使用的解決方法是設置一個css3過渡，以及一個帶有if語句的檢測器，以使用不支持過渡的jQuery，請參見下文：

var Detect = (function() {
            var
            //Add CSS properties to test for
                            props = "transition".split(","),
            //Browser prefixes
                            CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","),
                            d = document.createElement("detect"),
                            test = [],
                            p, pty;
            // test prefixed code
            function TestPrefixes(prop) {
                            var
                                            Uprop = prop.charAt(0).toUpperCase() + prop.substr(1),
                                            All = (prop + ' ' + CSSprefix.join(Uprop + ' ') + Uprop).split(' ');
                            for (var n = 0, np = All.length; n < np; n++) {
                                            if (d.style[All[n]] === "") return true;
                            }
    return false;
            }
            for (p in props) {
                            pty = props[p];
                            test[pty] = TestPrefixes(pty);
            }
            return test;

            }());


if (Detect.transition) {
        $(function(){
$(window).scroll(function() {
//your code here
//remember to use an if else