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过渡到设定值

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');
});

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>

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!