Maison > interface Web > js tutoriel > Tutoriel d'amélioration de JavaScript – Animation jQuery

Tutoriel d'amélioration de JavaScript – Animation jQuery

黄舟
Libérer: 2017-01-21 16:03:19
original
1220 Les gens l'ont consulté

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);
Copier après la connexion

Le paramètre params requis définit les propriétés CSS qui forment l'animation.

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.

L'exemple suivant montre une application simple de la méthode animate() ; elle déplace l'élément

vers la gauche jusqu'à ce que l'attribut left soit égal à 250 pixels :

Exemple

$("button").click(function(){ $("div").animate({left:'250px'}); });
Copier après la connexion
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:&#39;250px&#39;});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>
Copier après la connexion

Ce qui précède est le contenu du didacticiel d'amélioration JavaScript-animation jQuery. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal