JQuery animate() metoda pozwala tworzyć niestandardowe animacje.
jQuery animacje - The animate() Metoda
JQuery animate() Metoda służy do tworzenia własnych animacji.
Składnia:
$(selector).animate({params},speed,callback);Wymagany parametr params definiuje właściwości CSS być animowane.
Opcjonalny parametr prędkości określa czas trwania efektu. Może przyjmować następujące wartości: "slow", "fast" , albo milisekund.
Opcjonalny parametr callback jest funkcją mają zostać wykonane po zakończeniu animacji.
Poniższy przykład pokazuje proste użycie animate() metody; porusza się <div> elementu w prawo, dopóki nie osiągnie lewą własność 250px:
Domyślnie wszystkie elementy HTML mają pozycję statyczną i nie mogą być przenoszone.
Aby manipulować pozycję, należy pamiętać, aby najpierw ustawić właściwość position CSS elementu do relative, fixed lub absolute !
jQuery animate() - Manipulacja wiele właściwości
Należy zauważyć, że wiele właściwości mogą zostać ożywione jednocześnie:
Przykład
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Spróbuj sam " Czy to możliwe, aby przetwarzać wszystkie właściwości CSS z animate() metody?
Tak, prawie! Istnieje jednak jedna ważna rzecz do zapamiętania: wszystkie nazwy właściwości muszą być wielbłądziej obudowane w przypadku korzystania z animate() metody: Musisz napisać paddingLeft zamiast padding-left, marginRight zamiast margin-right , i tak dalej.
Również animacja kolor nie jest wliczone w podstawowej biblioteki jQuery.
Jeśli chcesz ożywić kolor, trzeba pobrać wtyczkę Kolor Animations z jQuery.com.
jQuery animate() - Za pomocą wartości względnych
Jest również możliwe określenie wartości względnej (wartość jest wówczas w stosunku do wartości bieżącego elementu). Odbywa się to poprzez umieszczenie += i -= przed wartości:
Przykład
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Spróbuj sam " jQuery animate() - Za pomocą predefiniowanych wartości
Można nawet określić wartość nieruchomości animacji jako "show", "hide" lub "toggle" :
jQuery animate() - Używa Kolejka funkcjonalności
Standardowo wyposażony w funkcjonalność jQuery kolejki dla animacji.
Oznacza to, że jeśli piszesz wielokrotnego animate() zwraca po drugim, jQuery tworzy "wewnętrzne" kolejkę z tych wywołań metod. Następnie prowadzi ożywione nazywa jeden po drugim.
Tak więc, jeśli chcesz wykonywać różne animacje po sobie nawzajem, możemy skorzystać 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");
});
Spróbuj sam " Poniższy przykład pierwsza przesuwa element <div> 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");
});
Spróbuj sam " Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»
jQuery Effects referencyjny
Aby uzyskać pełny przegląd wszystkich efekty jQuery, przejdź do naszej jQuery Effect Reference .