如何動畫/顯示隱藏的div？

Question

所以我試圖用鏈接單擊時顯示切換轉換的div。

我的代碼：

$("nav ul li#about a").click(function (e) { 
    $("div#about").slideToggle(200); 
    e.preventDefault(); 
}); 

它的偉大工程，但我想在這裏這樣的效果： http://ricostacruz.com/jquery.transit/ 向下滾動，找到「其他媒體資源轉型」。你看到那個縮放效果（第一個演示盒）嗎？這是我想要的，而不是slideToggle。所以我想要類似的效果TOGGLE ...當鏈接被點擊時轉換IN和OUT。

我希望你們能幫助我:)

Answer 1

jQuery的方法的slideToggle實際上只是圍繞animate一個奇特的包裝。由於這個傳輸插件模仿了animate語法，我們可以很容易地創建一個切換。

$("nav ul li#about a").click(function (e) { 
    e.preventDefault(); 
    var about = $("div#about"); 
    if (about.css('opacity') == 0) { 
     about.transition({ opacity: 1.0, scale: 1.0 }); 
    } else { 
     about.transition({ opacity: 0.0, scale: 1.6 }); 
    } 
}); 

我還沒有測試此代碼，但它應該檢查有關的div是點擊不可見的，選擇執行基於該哪個動畫。