Czy jQuery jest animowany między dwiema różnymi klasami CSS?

Question

Próbuję zrozumieć, jak działają animacje jQuery.

Na przykład, jeśli mam element a z CSS, który sprawia, że ​​wyglądają jak klikalny obraz i dana with i height w CSS, jak bym bezpiecznie animować width i height tego elementu?

Czy muszę animować wartości w klasie CSS? Czy muszę ustawić nową klasę CSS z wartościami docelowymi dla width i height, i pozwolić jQuery na animację z oldClass na newClass?

Czy mogę po prostu użyć metod jQuery .width() i .height(), niezależnie od wartości określonych w CSS?

Co mnie dezorientuje: czy dostosowuję szerokość elementu za pomocą jQuery, czy to również modyfikuje mój CSS, czy też jQuery/JavaScript po prostu przesłoni określone wartości w CSS za pomocą czegoś innego? Mam na myśli: po użyciu jQuery do edycji szerokości, czy ta szerokość staje się nową wartością również w pliku CSS? Czy mogę zastosować tę klasę do innych elementów i będą one miały nową szerokość?

Answer 1

Będzie nadpisywać styl inline.

Będę teraz wyświetlać wersję z górną, lewą będącą animowaną, ale można ją zastosować na prawie wszystkich właściwościach CSS.

HTML

<span id="test">blablabla</span> 

CSS

span{ 
    position:absolute; 
    display:block; 
    height:50px; 
    width:50px; 
} 

jquery

$('#test').animate({top:'100px',left:'50px'}, 500); 

fiddle

Answer 2

jQuery animate animuje tylko liczbowe wartości css. Nie będzie animować między klasami (zobacz poniższy przykład, jak to zrobić). Funkcja .animate() dodaje wartość css, którą podajesz jako parametr i dodaje ją jako inline css. Zawsze będzie nadpisywać twoje css arkusza stylów. Jest to w porządku, ale trochę niechlujne i może bardzo łatwo wymknąć się spod kontroli.

Jednakże, jeśli chcesz animować między klasami, lepiej jest używać wydajności i używać bardziej przejrzystych właściwości przejścia css3. Patrz przykład:

HTML

<div class="myTestAnimation">Something to test</div> 

JQuery (przydałby wanilię javascript do tego również). Po prostu przełączam się między klasami. W ten sposób nie masz żadnych informacji o stylizacji w swoich css.

jQuery(document).ready(function($) { 
    $(".myTestAnimation").click(function() { 
     $(this).toggleClass("animate"); 
    }); 
}); 

CSS (to animuje szerokość i wysokość i kolor tła) .animate() nie będzie animować kolor tła tak, że jest to dodatkowy bonus.

.myTestAnimation { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    -webkit-transition: background-color 300ms linear, width 300ms linear, height 300ms linear; 
    transition: background-color 300ms linear, width 300ms linear, height 300ms linear; 
    position: relative; 
} 
.myTestAnimation.animate { 
    background-color: blue; 
    width: 200px; 
    height: 200px; 
} 

Answer 3

Wiem, że minęło dużo czasu, ale i tak może pomóc komuś, kto szuka odpowiedzi.Opieranie się na właściwości przejścia CSS3 może powodować problemy, gdy chce obsługiwać starsze przeglądarki.

Żądane zachowanie animacji między dwoma stanami (klas CSS) można w pełni zrealizować, korzystając z interfejsu jQuery UI, który obsługuje tę funkcję, rozszerzając metodę switchClass(). Obsługuje również wszystkie urokami metody animate(), takie jak czas trwania, złagodzenie, callback itp

jako oficjalny stanach dokumentacja: "

podobny do natywnych przejść CSS, animacje jQuery UI klasy zapewniają płynne przejście z jednego stanu do drugiego, pozwalając zachować wszystkie szczegóły dotyczące zmian stylów w CSS i poza JavaScript.

Możesz przeczytać wszystko na ten temat here.

jQuery UI można również skompilować, aby zawierał tylko potrzebne elementy, dzięki czemu można zmniejszyć rozmiar biblioteki, wykluczając funkcje, których nie będzie można używać. Sprawdź dostępne opcje here.

Mam nadzieję, że pomógł komuś!