Méthode animate() de l'effet jQuery

Méthodes d'effets jQuery

La méthode animate() effectue des animations personnalisées sur un ensemble de propriétés CSS.

Les animations permettent de créer des transitions animées entre une configuration de style CSS et une autre.

Toutes les propriétés d'animation doivent être définies sur une valeur numérique unique (par exemple, la largeur, la hauteur ou la valeur de gauche).

Les valeurs de chaîne ne peuvent pas être définies pour les animations, à l'exception des chaînes "show", "hide" et "toggle" (par exemple, la couleur d'arrière-plan). Ces valeurs permettent de cacher et de montrer des éléments animés.

Les propriétés d'animation peuvent également être relatives. Si une valeur est fournie avec un préfixe+= ou-= chaîne de caractères, alors la valeur cible est calculée en ajoutant ou en soustrayant le nombre donné à la valeur actuelle de l'attribut.

En plus des propriétés de style, vous pouvez animer certaines propriétés non stylistiques (par exemple : scrollTop et scrollLeft).

Syntaxe1:

$(selector).animer({styles}, duration, easing, callback)

Syntaxe2:

$(selector).animer({styles}, {options})

示例

Animez un élément en changeant sa largeur :

$("#btn1").click(function() {
　　$("div").animate({width: "500px");
});

Animez un élément en changeant sa largeur et sa hauteur :

$("#btn1").click(function() {
　　$("div").animate({width: "500px");
　　$("div").animate({height: "400px");
});

Animez un élément en passant plusieurs propriétés de style et leurs valeurs :

$("#btn1").click(function() {
　　$("div").animate({
　　　　　width:"500px",
　　　　　height:"400px"
　　});
});

Utilisez animate() avec :deduration et easingdeParamètres :

$("button").click(function(){
　　$("div").animate({width:"500px", height:"400px"},　4000, "linear");
});

Utilisez animate() avec une fonction de rappel :

$("button").click(function(){
　　$("div").animate({
　　　　width:"500px",
　　　　height:"400px"
　　},　500, "linear",
　　function() {
　　　　$(this).after("<h2>动画完成</>2用户滚动页面时添加平滑滚动：
　　});
});

Utilisez la syntaxe alternative pour spécifier plusieurs animations {styles} et {options} :

$("button").click(function(){
　　$("div").animate({
　　　　width:"500px",
　　　　height:"400px"
　　
　　　　duration:500,
　　　　easing:"linear",
　　　　complete:function(){
　　　　　　$(this).after("<h2>动画完成</>2用户滚动页面时添加平滑滚动：
　　　　}
　　});
});

let size = $(".main").height();

获取".main" 高度　//　$(window).keydown(function(event) {
if(event.which ===
　　) {　4如果按下向下箭头键　//　else if(event.which ===
　　　　$("html, body").animer({scrollTop: "+="　+　size},　300);
　　}　38) {　//　如果按下向上箭头键
　　　　$("html, body").animer({scrollTop: "-="　+　size},　300);
　　}
});

使用相对值为所有段落设置动画：

$("p").click(function(){
　　$(this).animer({
　　　　fontSize: "+=5px",
　　　　padding : "+=10px"
　　});
});

此外，我们甚至可以指定属性的动画值「show」、「hide」或「toggle」：

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

参数值(语法1)

$(selector).animer({styles}, duration, easing, callback)

参数值(语法2)

$(selector).animer({styles}, {options})

Méthodes d'effets jQuery