Latest web development tutorials

Efekty jQuery - animacja

Metoda jQuery animate () pozwala na tworzenie własnych animacji.



jQuery

metody animate () - animacje jQuery

Metoda jQuery animate () służy do tworzenia niestandardowych animacji.

Składnia:

$(selector).animate({params},speed,callback);

Parametr Wymagany params określa powstawanie właściwości CSS animacji.

Opcjonalny parametr prędkości określa czas trwania efektu. To może przyjmować następujące wartości: "wolno", "szybko", albo milisekund.

Opcjonalny parametr callback to nazwa funkcji wykonywanej po jego zakończeniu.

Poniższy przykład ilustruje sposób prosty ożywione aplikacji (). To element <div> w prawo, aby przenieść 250 pikseli:

Przykłady

$("button").click(function(){
$("div").animate({left:'250px'});
});

Spróbuj »

lampa Domyślnie wszystkie elementy HTML mają pozycję statyczną i nie może się ruszyć.
Dla pozycji roboczej, pamiętam pierwszy atrybut położenia elementu CSS ustawiona na relative, fixed lub absolutny!

jQuery animate () - działa wiele właściwości

Należy pamiętać, że proces generowania animacji można używać wielu właściwości:

Przykłady

$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

Spróbuj »

lampaMożna animować () w celu obsługi wszystkich atrybutów CSS?

Tak, prawie! Jednak ważne jest, aby pamiętać: W przypadku korzystania animate (), napisać wszystkie atrybuty nazwy należy użyć notacji Camel, na przykład, musi być stosowany zamiast paddingLeft padding-lewo, zamiast używania marginRight margin-right, etc. ,

W tym samym czasie, animacja koloru nie jest zawarta w rdzeniu jQuery biblioteki.

Jeśli trzeba wygenerować animację koloru, trzeba jquery.com pobrać Kolor Animations wtyczki.


jQuery animate () - wykorzystanie wartości względnej

Można także określić wartość względną (wartość jest w stosunku do bieżącej wartości elementu). Muszą poprzedzać wartość z = + lub - =:

Przykłady

$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

Spróbuj »

() JQuery animate - używać predefiniowanych wartości

Można nawet umieścić wartość właściwości animacji "show", "ukryć" lub "przełącznik":

Przykłady

$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

Spróbuj »

jQuery animate () - Za pomocą funkcji kolejki

Domyślnie jQuery udostępnia funkcje kolejkowania dla animacji.

Oznacza to, że jeśli piszesz więcej niż jeden po drugim animate () wezwanie, jQuery utworzy wywołanie metody te "wewnętrzne" kolejki. Wtedy jeden po drugim, aby uruchomić je ożywić rozmowy.

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 »

Poniższy przykład elementu <div> jest przesunięty w prawo 100 pikseli, a następnie zwiększyć rozmiar tekstu:

Przykład 2

$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

Spróbuj »