jQuery背景顏色動畫切換

Question

我試圖切換背景顏色點擊（與表單slideToggle），但第一次單擊隱藏元素（＃opt4），而不是更改顏色的動畫。我究竟做錯了什麼？

注意：當我運行單個背景動畫時，而不是切換，它沒有問題。不過，我想在用戶再次點擊鏈接時刪除顏色。

$(document).ready(function() { 

      $('#contact form').hide(); 

      $('a#opt4').click(function(e) { 
       e.preventDefault(); 

       $('#contact form').slideToggle(); 

       $(this).toggle(function() { 
        $(this).animate({ 
         backgroundColor: "#99ccff"},500); 
        }, 
        function() { 
         $(this).animate({ 
         backgroundColor: "none"},500); 
        }); 

      }); 
     }); 

Answer 1

什麼版本的jQuery您使用的是

？截至jQuery 1.8 .toggle()已被棄用，並且1.9 .toggle()被刪除。

正因如此，人們對toggle animation與toggle event相同並不感到困惑。

注意：此方法簽名在jQuery 1.8中被棄用，並且在jQuery 1.9中被刪除了 。 jQuery還提供了一種名爲 .toggle()的動畫方法，用於切換元素的可見性。 動畫或事件方法是否被觸發取決於通過的參數 的設置。

如果您使用的是1.9或更高版本，您可以嘗試編寫自己的切換功能。當然，這種方法是基本的，可以建立在這個基礎之上。

$.fn.toggleState = function (even, odd) { 
    this.toggled = this.data('toggled') || false; 

    if (!toggled) { 
     if (typeof even === 'function') { 
      even(this); 
     } 
    } else { 
     if (typeof odd === 'function') { 
      odd(this); 
     } 
    } 

    this.data({ toggled: !this.toggled }); 
}; 

哪些可以像使用，這樣

$('a#opt4').click(function (e) { 
    e.preventDefault(); 

    $(this).toggleState(function (el) { 
     el.animate({ 
      backgroundColor: "#99ccff" 
     }, 500); 
    }, function (el) { 
     el.animate({ 
      backgroundColor: "none" 
     }, 500); 
    }); 
}); 

$.fn.toggleState = function (even, odd) { 
    this.toggled = this.data('toggled') || false; 

    if (!this.toggled) { 
     if (typeof even === 'function') { 
      even(this); 
     } 
    } else { 
     if (typeof odd === 'function') { 
      odd(this); 
     } 
    } 

    this.data({ toggled: !this.toggled }); 
}; 

檢查它在這個JSFiddle

只是一個側面說明，你也可以使用jQueryUI的動畫背景色。演示中使用了哪些內容。

Answer 2

使用類來做到這一點...

在CSS：

.active-link{ 
     background-color: #99ccff; 
    -moz-transition: all 0.2s linear; 
    -webkit-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
} 

在您的JS：

$(this).toogleClass("active-link"); 

Answer 3

從這裏的文件你不能動畫背景顏色。

從文檔

背景顏色不能 - 動畫 - ，除非使用jQuery.Color（）插件）

我沒有使用它，但這裏是他們提到的顏色插件。

https://github.com/jquery/jquery-color/