ToggleClass animate jQuery？

我有一節在我的網站，當用戶點擊我想它的擴大，我使用jQuery的toggleClass這...ToggleClass animate jQuery？

expandable: function(e) { 
    e.preventDefault(); 
    $(this).closest('article').toggleClass('expanded', 1000); 
}

這是工作得很好，只有我願意以某種方式動畫它。在Chrome中，我的文章慢慢增長到新的大小，只有在Firefox中，它才能「立即」調整自己的大小而不使用動畫，是否有辦法讓這種動畫變成動畫？

來源

2012-06-24 Liam

檢查jQuery UI。 – gdoron

@gdoron嗨，很好... – thecodeparadox

jQuery的用戶界面延伸jQuery的天然toggleClass採取第二個可選參數：duration

toggleClass(class, [duration])

Docs + DEMO

來源

2012-06-24 17:12:48 gdoron

所以，如果我想要動畫/淡入此動作，我必須使用整個jQuery UI庫？有沒有另外一種方法來做到這一點沒有jQuery UI？ – ed1nh0

@ ed1nh0，你可以創建一個自定義的jQuery UI，只需要你需要的部分。 [看這裏]（http://jqueryui.com/download/），我必須承認，我不知道它應該在那裏的類別。 – gdoron

要在jQuery UI中使用動畫toggleClass，你必須加載'Core'和'Effect Core'。見http://jqueryui.com/download/#!themeParams=none&components=1000000000000000000010000000000000 –

.toggleClass()不會動畫，你應該去slideToggle()或.animate()方法。

來源

2012-06-24 16:42:11 thecodeparadox

With slideToggle（）我可以設置最小高度，因此它不能完全隱藏？ – Liam

您應該看看jQuery上的toggle函數。這將允許您指定緩動方法來定義切換方式的工作方式。

slideToggle只會上下滑動，而不是左/右，如果這是你在找什麼。

如果您需要的類進行切換，以及你可以deifine，在與該toggle功能：

$(this).closest('article').toggle('slow', function() { 
    $(this).toggleClass('expanded'); 
});

來源

2012-06-24 16:44:26 Brombomb

謝謝@Brombomb，我目前使用toggleClass（）我只是不確定是否可以向它添加動畫。 – Liam

正是我在找的 – srb

作爲一個旁註（因爲我起初沒有注意到這一點），。toggle（）允許您在DOM中隱藏或顯示元素的動畫。起初我以爲它會激發階級國家之間的過渡，而事實並非如此。 – Matt

應該檢查，一旦我包含了jQuery UI庫它工作得很好，並動畫。 ..

來源

2012-06-24 16:49:43 Liam

您可以簡單地使用CSS轉換，請參見this fiddle

.on { 
color:#fff; 
transition:all 1s; 
} 

.off{ 
color:#000; 
transition:all 1s; 
}

來源

2015-02-27 02:42:54

最好的解決方案。 CSS動畫和轉換可以替代大量（現在）不必要的JavaScript函數和動作，並使代碼更輕。尼斯一個達里奧 –

我試圖使用toggleClass方法來我的網站上隱藏的項目（使用visibility：hidden的，而不是顯示：沒有）與一個輕微的動畫，但由於某種原因動畫將無法正常工作（可能是由於舊版本的jQuery UI）。

該課程被刪除並正確添加，但我添加的持續時間似乎沒有任何區別 - 該項目只是簡單地添加或刪除沒有效果。

因此，要解決這個我用第二類在我的切換方法和應用了CSS的過渡，而不是：

的CSS：

.hidden{ 
    visibility:hidden; 
    opacity: 0; 
    -moz-transition: opacity 1s, visibility 1.3s; 
    -webkit-transition: opacity 1s, visibility 1.3s; 
    -o-transition: opacity 1s, visibility 1.3s; 
    transition: opacity 1s, visibility 1.3s; 
} 
.shown{ 
    visibility:visible; 
    opacity: 1; 
    -moz-transition: opacity 1s, visibility 1.3s; 
    -webkit-transition: opacity 1s, visibility 1.3s; 
    -o-transition: opacity 1s, visibility 1.3s; 
    transition: opacity 1s, visibility 1.3s; 
}

的JS：

function showOrHide() { 
     $('#element').toggleClass("hidden shown"); 
    }

感謝@ tomas.satinsky爲真棒（和超級簡單）的答案this post.

來源

2016-04-16 15:12:47 DevManQP

ToggleClass animate jQuery？

回答

相關問題