jQuery動畫-擴展正確的文本內容？

Question

嗨，我正在嘗試制作動畫或提供任何幻燈片效果來切換課程（實際的擴展），因為目前這有點簡單

這是我目前正在您的幫助下進行的小提琴 ，但是它什么也沒做，無法解決。

$(document).ready(function(){
  $(".gamewrapper").click(function(){
    $(".game-name", this).toggleClass("black");
    $(this).toggleClass("expand", 1000);
  });
});

任何幫助，請，

提前致謝

Answer 1

jQuery的.toggleClass()方法僅使用1個參數，您在其中獲得的1000參數不執行任何操作。

如果要動畫化在具有expand類與不具有expand類之間的css更改，則必須：

1）在這些屬性上使用CSS過渡：

http://www.w3schools.com/css3/css3_transitions.asp

2）使用其他插件。 jQueryUI有一個switchClass插件可以做到這一點。

http://jqueryui.com/switchClass/

Answer 2

我同意尼古拉斯，

CSS3 Transitions，jQueryUI或您也可以使用jQuery.animate為所有樣式設置動畫。

例如

$('.classname').animate({'width':'100px','height':'100px'},200)

Answer 3

jQuery UI toggleClass方法是內置的jQuery方法重寫：

jQuery UI覆蓋了幾種內置jQuery方法，以提供其他功能。 使用這些替代時，確保已加載jQuery UI非常重要。 如果未加載jQuery UI，則這些方法將仍然存在，但是預期的功能將不可用，從而導致可能難以跟蹤的錯誤。

該方法在執行操作時接受一個緩動參數：

緩動（默認值：swing）類型：字符串一個字符串，指示用於過渡的緩動功能。

擺弄的問題是您不包括 jQuery UI庫。

工作動畫小提琴： http : //jsfiddle.net/YqxAR/53/