Efekty jQuery - Animacja
Dzięki jQuery możesz tworzyć własne animacje.
Animacje jQuery - metoda animate()
Metoda jQuery animate()służy do tworzenia niestandardowych animacji.
Składnia:
$(selector).animate({params},speed,callback);
Wymagany parametr params definiuje animowane właściwości CSS.
Opcjonalny parametr prędkości określa czas trwania efektu. Może przyjmować następujące wartości: „wolno”, „szybko” lub milisekundy.
Opcjonalny parametr wywołania zwrotnego to funkcja, która ma zostać wykonana po zakończeniu animacji.
Poniższy przykład ilustruje proste użycie animate()metody; przesuwa element <div> w prawo, aż osiągnie lewą właściwość 250px:
Przykład
$("button").click(function(){
$("div").animate({left: '250px'});
});
Domyślnie wszystkie elementy HTML mają pozycję statyczną i nie można ich przenosić.
Aby manipulować pozycją, pamiętaj, aby najpierw ustawić właściwość pozycji CSS elementu na relatywną, stałą lub bezwzględną!
jQuery animate() - Manipuluj wieloma właściwościami
Zauważ, że wiele właściwości może być animowanych jednocześnie:
Przykład
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Czy można manipulować WSZYSTKIMI właściwościami CSS za pomocą metody animate()?
Tak, prawie! Należy jednak pamiętać o jednej ważnej rzeczy: wszystkie nazwy właściwości muszą być pisane wielkimi literami, gdy są używane z metodą animate(): będziesz musiał napisać paddingLeft zamiast padding-left, marginRight zamiast margin-right i tak dalej.
Również animacja kolorów nie jest zawarta w podstawowej bibliotece jQuery.
Jeśli chcesz animować kolor, musisz pobrać
wtyczkę Color Animations z jQuery.com.
jQuery animate() - Korzystanie z wartości względnych
Możliwe jest również zdefiniowanie wartości względnych (wartość jest wtedy odnoszona do bieżącej wartości elementu). Odbywa się to poprzez umieszczenie += lub -= przed wartością:
Przykład
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() - Używanie wstępnie zdefiniowanych wartości
Możesz nawet określić wartość animacji właściwości jako „ show”, „ hide” lub „ toggle”:
Przykład
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate() - używa funkcji kolejki
Domyślnie jQuery zawiera funkcję kolejki animacji.
Oznacza to, że jeśli piszesz wiele animate()wywołań jeden po drugim, jQuery tworzy „wewnętrzną” kolejkę z tymi wywołaniami metod. Następnie uruchamia animowane wywołania JEDEN po JEDEN.
Jeśli więc chcesz wykonać po sobie różne animacje, korzystamy z funkcjonalności kolejki:
Przykład 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
Poniższy przykład najpierw przenosi <div>element w prawo, a następnie zwiększa rozmiar czcionki tekstu:
Przykład 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Ćwiczenia z jQuery
Odniesienie do efektów jQuery
Aby uzyskać pełny przegląd wszystkich efektów jQuery, przejdź do naszego Dokumentacja efektów jQuery .