Effets jQuery - Animation

Méthode animate()

La méthode jQuery animate() est utilisée pour créer des animations personnalisées.

Syntaxe :

$(selector).animate({params},speed,callback);

Définition des paramètres de paramètres requis pour former une animation CSS propriétés.

Le paramètre optionnel de vitesse précise la durée de l'effet. Il peut prendre les valeurs suivantes : "lent", "rapide" ou millisecondes.

Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois l'animation terminée.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>向右移动</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Remarque :

Par défaut, tous les éléments HTML ont une position statique et ne peuvent pas être déplacés.
Si vous avez besoin d'opérer la position, n'oubliez pas de définir d'abord la propriété CSS position de l'élément sur relative, fixe ou absolue !

animate() - Manipuler plusieurs propriétés

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script> 
</head>
<body>
<button>开始动画</button>
<p>逐渐变大</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

La méthode animate() peut-elle être utilisée pour manipuler toutes les propriétés CSS ?
Oui, presque ! Cependant, il y a une chose importante à retenir : lorsque vous utilisez animate(), vous devez utiliser la notation Camel pour écrire tous les noms de propriétés, par exemple, vous devez utiliser paddingLeft au lieu de padding-left, utiliser marginRight au lieu de margin-right, etc. . De plus, l'animation couleur n'est pas incluse dans la bibliothèque principale jQuery.

animate() - utiliser des valeurs relatives

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
</head>
 <body>
<button>开始动画</button>
<br><br>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

animate() - utiliser des valeurs prédéfinies

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script> 
</head>
 <body>
<button>开始动画</button>
<p>收起</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

animate() - utiliser des fonctions de file d'attente

Par défaut, jQuery fournit une fonctionnalité de file d'attente pour les animations.

Cela signifie que si vous écrivez plusieurs appels animate() les uns après les autres, jQuery créera une file d'attente "interne" contenant ces appels de méthode. Exécutez ensuite ces appels animés un par un.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script> 
</head>
 <body>
<button>开始动画</button>
<p></p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("button:first").click(function() { $("#block").animate({ left: "-=80px" //相对左移 }, 300); }); $("button:last").click(function() { $("#block").animate({ left: "+=80px" //相对右移 }, 300); }); }); </script> <style type="text/css"> div { background-color: #FFFF00; height: 40px; width: 80px; border: 1px solid #000000; margin-top: 15px; padding: 15px; text-align: center; position: absolute; } </style> </head> <body style="margin-left:200px;"> <button><--GO</button> <button>Go--></button> <div id="block">动画！</div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Effets jQuery - Animation

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]