ToggleClass animate jQuery?

Question

Mam punkt na mojej stronie internetowej, że gdy użytkownik kliknie chciałbym go poszerzyć, używam jQuery na toggleClass tego ...

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

ten pracuje bez zarzutu, tylko chciałbym jakoś to ożywiać. W chrome mój artykuł powoli rośnie do nowego rozmiaru, tylko w Firefoksie "natychmiast" zmienia się bez animacji, czy istnieje sposób, aby to ożywić?

Answer 1

jQuery UI rozszerza jQuery rodzimy toggleClass wziąć drugi opcjonalny parametr: duration

toggleClass(class, [duration]) 

Docs + DEMO

Answer 2

.toggleClass() nie będzie animowany, powinieneś wybrać metodę slideToggle() lub .animate().

Answer 3

Powinieneś spojrzeć na funkcję toggle znalezioną na jQuery. Umożliwi to określenie metody łagodzenia w celu zdefiniowania działania przełącznika.

slideToggle będzie przesuwać tylko w górę iw dół, nie w lewo/w prawo, jeśli tego właśnie szukasz.

Jeśli potrzebujesz klasę być przełączany jak dobrze można deifine że w funkcji toggle z:

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

Answer 4

Powinny mieć zaznaczone, Raz zawarte jQuery UI Library to działało dobrze i było animacji. ..

Answer 5

można po prostu użyć przejścia CSS, zobacz this fiddle

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

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

Answer 6

próbowałem użyć metody toggleClass ukryć element na mojej stronie (przy użyciu widoczność: ukryte w przeciwieństwie do wyświetlenia: brak) z niewielką animacją, ale z jakiegoś powodu animacja nie działałaby (prawdopodobnie ze względu na starszą wersję interfejsu jQuery).

Klasa została usunięta i dodana poprawnie, ale dodany czas nie wydawał się mieć żadnego znaczenia - element został po prostu dodany lub usunięty bez efektu.

Tak, aby rozwiązać ten problem kiedyś drugą klasę w moim sposobie przełączania i zastosowane przejścia CSS zamiast:

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"); 
    } 

Thanks @ tomas.satinsky za niesamowitą (i super prostą) odpowiedź na this post.