Un guide pour écrire des effets d'animation dans la bibliothèque jQuery de JavaScript_Basics

Les méthodes d'animation couramment utilisées dans jquery sont hide() et show().

$(element).hide() Ce code peut être équivalent à cet element.css("display","none")

Remplissez les événements dans hide(time) et show(time), et ils peuvent lentement disparaître et apparaître. Vous pouvez modifier plusieurs styles, hauteur, largeur et opacité des éléments.

Un autre ensemble de méthodes fadeIn() et fadeOut() sont différentes de hide et show en ce sens que lorsque hide ou show est utilisé, la hauteur de la page Web sera modifiée, contrairement à fadeIn et fadeOut.

$("#panel h5.head").toggle(function(){                                                                                    $ (this).removeClass("highlight");                                                                                                                                                                                                                                                                                         .

Résumé des méthodes d'animation

File d'attente d'animation

(1) Effets d'animation sur un ensemble d'éléments.

a) Lors de l'application de plusieurs propriétés dans une méthode animate(), les animations se produisent simultanément.

b) Lorsque la méthode d'animation est appliquée de manière chaînée, l'animation se produit en séquence.

(2) Effets d'animation sur plusieurs groupes d'éléments

a) Par défaut, les animations se produisent toutes simultanément.

b) Lorsque la méthode d'animation est appliquée sous forme de rappels, l'animation se produit dans l'ordre des rappels.

De plus, dans la méthode d'animation, sachez que d'autres méthodes non-animation sauteront dans la file d'attente, comme la méthode css(). Pour que ces méthodes non-animation s'exécutent également dans l'ordre, ces méthodes doivent être écrites dans le fichier. fonction de rappel de la méthode d'animation.

Donnez un exemple d'animation :

$(“#id”).animat({left:”400px”,top:”300px”},3000,function(){


     $(this).css(“border”,”1px solid blue”);


});

Si vous souhaitez que l'animation s'arrête, vous devez insérer la méthode stop()

avant la méthode animate()

Par exemple : $("#id").stop().animate() Faites attention aux deux paramètres dans stop.

Méthode pour déterminer si un élément est dans un état animé :

$(element).is(“:animated”);

jQuery peut facilement ajouter des effets dynamiques aux éléments de la page. Vous pouvez utiliser ses effets intégrés ou définir vos propres effets.

Voici quelques méthodes d'effets intégrées :

• $.fn.show Afficher l'élément sélectionné
• $.fn.hide Masquer l'élément sélectionné
• $.fn.fadeIn fondu entrant
• Fondu $.fn.fadeOut
• $.fn.slideDown affiche les éléments par effet de glissement vertical
• $.fn.slideUp masque les éléments grâce à l'effet Chine vertical
• $.fn.slideToggle Afficher ou masquer l'exécution de l'interaction coulissante

Un exemple simple :

$('h1').show();

Définir la durée de l'effet d'animation

Pour $.fn.show et $.fn.hide, la durée par défaut est de 0. La durée par défaut pour les autres effets est généralement de 400 millisecondes. Bien entendu, vous pouvez également définir la durée vous-même :

$('h1').fadeIn(300);   // 300 毫秒
$('h1').fadeOut('slow'); // slow 是内建的速度常量

Les constantes de vitesse par défaut de jQuery se trouvent dans l'objet jQuery.fx.speeds :

speeds: {
  slow: 600,
  fast: 200,
  // Default speed
  _default: 400
}

Nous pouvons également étendre cet objet et ajouter nos propres valeurs de vitesse couramment utilisées :

jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;

Fonction de rappel

Si vous souhaitez exécuter du code après la fin de l'effet d'animation, vous pouvez remplacer ces méthodes d'animation par une fonction de rappel :

$('div.old').fadeOut(300, function() {
 $(this).remove();
});

Si aucun élément ne correspond dans le sélecteur, la fonction de rappel ne sera pas exécutée, il est donc nécessaire de porter un jugement avant d'exécuter la fonction de rappel :

var $thing = $('#nonexistent');

var cb = function() {
  console.log('done!');
};

if ($thing.length) {
  $thing.fadeIn(300, cb);
} else {
  cb();
}

Méthode d'animation personnalisée

La méthode $.fn.animate dans jQuery peut être utilisée pour étendre notre animation personnalisée. Ceci est principalement réalisé en définissant les propriétés CSS des éléments via la méthode animate. Lors de la définition des propriétés CSS des éléments, vous pouvez utiliser des valeurs absolues. ​​ou valeurs relatives. Valeur :

$('div.funtimes').animate(
  {
    left : "+=50",
    opacity : 0.25
  },
  300, // 时长
  function() { console.log('done!'); // 回调函数
});

Cependant, lorsque vous utilisez $.fn.animate pour créer un effet d'animation personnalisé, la couleur de l'élément ne peut pas être modifiée. Si vous souhaitez créer des animations en couleurs, vous devez vous appuyer sur d'autres plug-ins de couleurs.
Style d'animation

jQuery a deux styles d'animation intégrés : swing et linéaire

$('div.funtimes').animate(
  {
    left : [ "+=50", "swing" ],
    opacity : [ 0.25, "linear" ]
  },
  300
);

Animation de contrôle

jQuery propose plusieurs méthodes pour contrôler l'exécution de l'animation :

$.fn.stop arrête l'animation en cours d'exécution

$.fn.delay met l'animation en pause pendant un certain temps :

$('h1').show(300).delay(1000).hide(300);

jQuery.fx.off : désactivez l'effet de transition de l'animation, ce qui équivaut à définir la durée sur 0.