jQuery animate() Metode
Voorbeeld
"Animeer" 'n element deur sy hoogte te verander:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
Definisie en gebruik
Die animate()-metode voer 'n pasgemaakte animasie van 'n stel CSS-eienskappe uit.
Hierdie metode verander 'n element van een toestand na 'n ander met CSS-style. Die CSS-eienskapwaarde word geleidelik verander om 'n geanimeerde effek te skep.
Slegs numeriese waardes kan geanimeer word (soos "margin:30px"). Stringwaardes kan nie geanimeer word nie (soos "agtergrondkleur:rooi"), behalwe vir die stringe "wys", "versteek" en "wissel". Hierdie waardes laat toe om die geanimeerde element weg te steek en te wys.
Wenk: Gebruik "+=" of "-=" vir relatiewe animasies.
Sintaksis
(selector).animate({styles},speed,easing,callback)
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate. Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on. Properties that can be animated: Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element. |
speed | Optional. Specifies the speed of the animation. Default value is 400 milliseconds Possible values:
|
easing | Optional. Specifies the speed of the element in different points of the animation. Default value is "swing". Possible values:
|
callback | Optional. A function to be executed after the animation completes. To learn more about callback, please read our jQuery Callback chapter |
Alternatiewe sintaksis
(selector).animate({styles},{options})
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate (See possible values above) |
options | Optional. Specifies additional options for the animation. Possible values:
|
Probeer dit self - Voorbeeld
Hoe om animate() te gebruik met 'n terugbelfunksie wat die animasie herhaal.
Gebruik die alternatiewe sintaksis om veelvuldige animasiestyle en opsies te spesifiseer.
Hoe om die animate()-metode te gebruik om 'n vorderingsbalk te skep.
Hoe om animate() te gebruik om gladde blaai by skakels te voeg.