jQuery的addClass與動畫

Question

StackOverflow上的大人們，救救我的屁股請:)

我一直試圖讓這個到現在工作了一段時間，我讀過repeatadly的文件，試圖很多愚蠢的事情，現在我越看越它，並認爲我的思想變得空白，所以如果有人能說出一些光，我會很感激。我試圖讓jQuery爲addClass命令設置動畫效果。它工作正常，添加和刪除類的元素沒有問題，但我想讓它淡入類，然後淡出類，下面的代碼：

<script type="text/javascript"> 
    function addingClasses(id,myClass) { 
    $(id).addClass(myClass).animate({ 
     show: 'fadeIn', 
     speed: '2000', 
     hide: 'fadeOut' 
    }); 
    } 

    function removingClasses(id,myClass) { 
    $(id).removeClass(myClass); 
    } 
</script> 

<div id="about" class="sittingPretty" onmouseover="addingClasses(this, 'aboutHover')" onmouseout="removingClasses(this, 'aboutHover')"> 
    <p>About</p> 
</div> 

如果有人能幫忙，我會非常感謝，再次感謝球員:)

Answer 1

你想要做的是設置一個var並轉換爲該值。

短的例子是：

<script type="text/javascript"> 
    function addingClasses(id,myClass) { 
     var newValue = { opacity : 100 } 
     $(id).addClass(myClass).animate(newValue, 1000); 
    } 
    function removingClasses(id,myClass) { 
     var newValue = { opacity : 0 } 
     $(id).removeClass(myClass).animate(newValue, 1000); 
    } 
</script> 

這將逐漸從不管它現在是你通過它的價值改變的不透明度。

它不是最好的方法，但它會工作:)

Answer 2

有一個插件，使您能夠以動畫某一類： http://plugins.jquery.com/project/animate-to-class

據我所知，這不是標準的jQuery庫。

Answer 3

下面是簡單的答案 - 請與jQuery UI這個動畫的div：

$("div").click(function() { 
    $(this).addClass("big-blue", 1000, "easeOutBounce"); 
});