Plusieurs styles d'animation intégrés à jQuery

En utilisant JavaScript pour implémenter l'animation, le principe est très simple : il suffit de modifier un peu le style CSS de l'élément DOM à un intervalle de temps fixe (par exemple 0,1 seconde) à chaque fois (par exemple augmenter la hauteur et largeur de 10%), et on dirait que c'est comme une animation.

Mais pour implémenter manuellement des effets d'animation à l'aide de JavaScript, il faut écrire du code très complexe. Si vous souhaitez encapsuler des effets d'animation avec des fonctions pour une réutilisation facile, il y a d'autres éléments à prendre en compte. Cet article partage principalement avec vous plusieurs styles d'animation intégrés à jQuery.

En utilisant jQuery pour implémenter l’animation, le code ne pourrait pas être plus simple : une seule ligne de code est nécessaire !

Jetons d'abord un coup d'œil à plusieurs styles d'animation intégrés à jQuery :

afficher / masquer

Appelez show() et masquez (directement sans paramètres) , affichera et masquera les éléments DOM. Cependant, tant qu'un paramètre de temps est transmis, cela devient une animation :

var p = $('#test-show-hide');
p.hide(3000); // 在3秒钟内逐渐消失

Le temps est en millisecondes, mais il peut également s'agir de chaînes telles que "lent" et "rapide" :

var p = $('#test-show-hide');
p.show('slow'); // 在0.6秒钟内逐渐显示

La méthode toggle() détermine s'il faut show() ou hide() en fonction de l'état actuel.

slideUp / slideDown

Vous avez peut-être remarqué que show() et hide() s'étendent ou se rétrécissent progressivement à partir du coin supérieur gauche, tandis que slideUp() et slideDown() s'étendent ou se contractent progressivement la direction verticale.

slideUp() ferme un élément DOM visible, l'effet est comme fermer un rideau, slideDown() fait le contraire et slideToggle() détermine l'action suivante selon que l'élément est visible :

var p = $('#test-slide');
p.slideUp(3000); // 在3秒钟内逐渐向上消失

fadeIn / fadeOut

L'effet d'animation de fadeIn() et fadeOut() consiste à créer un fondu entrant et sortant, ce qui est obtenu en définissant continuellement l'attribut d'opacité de l'élément DOM, tandis que fadeToggle() est basé sur la visibilité ou non de l'élément. Pour décider de l'action suivante :

var p = $('#test-fade');
p.fadeOut('slow'); // 在0.6秒内淡出

Animation personnalisée

Si l'effet d'animation ci-dessus ne peut pas répondre à vos exigences, utilisez le dernier recours : animate() , cela peut être réalisé. Pour tout effet d'animation, les paramètres que nous devons transmettre sont le statut CSS final et l'heure de l'élément DOM. JQuery ajuste continuellement le CSS dans la période de temps jusqu'à ce qu'il atteigne la valeur que nous avons définie :

<.>

var p = $('#test-animate');
p.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000); // 在3秒钟内CSS过渡到设定值

animate() est OK Passer dans une fonction, qui sera appelée à la fin de l'animation :

var p = $('#test-animate');
p.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000, function () {
  console.log('动画已结束');
  // 恢复至初始状态:
  $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

En fait, ce paramètre de fonction de rappel est également applicable aux animations de base.

Avec animate(), vous pouvez obtenir divers effets d'animation personnalisés :

animate()

Animation en série

Les effets d'animation jQuery peuvent également être exécutés en série et mis en pause via la méthode delay(). De cette façon, nous pouvons obtenir des effets d'animation plus complexes, mais le code est assez simple :

var p = $('#test-animates');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
p.slideDown(2000)
  .delay(1000)
  .animate({
    width: '256px',
    height: '256px'
  }, 2000)
  .delay(1000)
  .animate({
    width: '128px',
    height: '128px'
  }, 2000);
}
</script>

Parce que l'animation doit être exécutée pendant un certain temps , jQuery doit donc renvoyer en permanence de nouveaux objets Promise pour effectuer les opérations ultérieures. Il ne suffit pas d’encapsuler simplement des animations dans des fonctions.

Pourquoi certaines animations n'ont aucun effet

Vous constaterez peut-être que certaines animations telles que slideUp() n'ont aucun effet. En effet, le principe de l'animation jQuery est de modifier progressivement la valeur du CSS, comme la hauteur passant progressivement de 100px à 0. Mais pour de nombreux éléments DOM qui ne sont pas bloqués, la définition de leur hauteur n'a aucun effet, donc l'animation n'a aucun effet.

De plus, jQuery n'implémente pas l'effet d'animation de background-color, et définir background-color avec animate() n'a aucun effet. Dans ce cas, vous pouvez utiliser la transition CSS3 pour obtenir des effets d'animation.

Recommandations associées :

Utilisez Canvas pour dessiner un exemple d'animation de courbe

JS et CSS pour réaliser le partage d'effets d'animation pendant le Web chargement de la page

Partage de deux méthodes de jQuery pour réaliser l'effet d'animation de la porte coulissante avec image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!