jQuery
Metoda jQuery .animate ()
Szukaj…
Składnia
- (selektor) .animate ({styles}, {options})
Parametry
| Parametr | Detale |
|---|---|
| nieruchomości | Obiekt właściwości i wartości CSS, do którego animacja będzie się przemieszczać |
| Trwanie | (domyślnie: 400) Ciąg lub liczba określająca czas trwania animacji |
| łagodzenie | (domyślnie: swing) Ciąg wskazujący, której funkcji łagodzenia należy użyć do przejścia |
| kompletny | Funkcja wywoływana po zakończeniu animacji, wywoływana raz na dopasowany element. |
| początek | określa funkcję, która ma zostać wykonana po rozpoczęciu animacji. |
| krok | określa funkcję do wykonania dla każdego kroku animacji. |
| kolejka | wartość logiczna określająca, czy animacja ma zostać umieszczona w kolejce efektów. |
| postęp | określa funkcję, która ma zostać wykonana po każdym kroku animacji. |
| gotowy | określa funkcję, która ma zostać wykonana po zakończeniu animacji. |
| zawieść | określa funkcję, która ma zostać wykonana, jeśli animacja się nie zakończy. |
| specialEasing | mapa jednej lub więcej właściwości CSS z parametru styles oraz odpowiadające im funkcje łagodzenia. |
| zawsze | określa funkcję do wykonania, jeśli animacja zatrzyma się bez ukończenia. |
Animacja z oddzwanianiem
Czasami musimy zmienić pozycję słów z jednego miejsca na drugie lub zmniejszyć rozmiar słów i automatycznie zmienić ich kolor, aby zwiększyć atrakcyjność naszej witryny lub aplikacji internetowych. JQuery bardzo pomaga w tej koncepcji za pomocą fadeIn(), hide(), slideDown() ale jego funkcjonalność jest ograniczona i wykonał tylko określone zadanie, które ją przypisuje.
Jquery rozwiązuje ten problem, zapewniając niesamowitą i elastyczną metodę o nazwie .animate() . Ta metoda pozwala ustawić niestandardowe animacje, które są używane we właściwościach css, które pozwalają na latanie ponad granicami. na przykład jeśli podamy właściwość stylu css jako width:200; a bieżąca pozycja elementu DOM wynosi 50, metoda animacji zmniejsza bieżącą wartość pozycji z podanej wartości css i animuje ten element do 150. Ale nie musimy się tym przejmować, ponieważ silnik animacji sobie z tym poradzi.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#btn1").click(function(){
$("#box").animate({width: "200px"});
});
</script>
<button id="btn1">Animate Width</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
Lista właściwości stylu css, które pozwalają na .animate() .
backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing, wordSpacing, lineHeight, textIndent,
Szybkość określona w .animate() .
milliseconds (Ex: 100, 1000, 5000, etc.),
"slow",
"fast"
.animate() określone w .animate() .
| "huśtawka" |
| "liniowy" |
Oto kilka przykładów ze złożonymi opcjami animacji.
Np. 1:
$( "#book" ).animate({
width: [ "toggle", "swing" ],
height: [ "toggle", "swing" ],
opacity: "toggle"
}, 5000, "linear", function() {
$( this ).after( "<div>Animation complete.</div>" );
});
Np. 2:
$("#box").animate({
height: "300px",
width: "300px"
}, {
duration: 5000,
easing: "linear",
complete: function(){
$(this).after("<p>Animation is complete!</p>");
}
});