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

Tutoriel d'amélioration de JavaScript – Animation jQuery

黄舟original: 2017-01-21 16:03:191258parcourir

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

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 dc6dce4a544fdca2df29d5ac0ea9906b vers la gauche jusqu'à ce que l'attribut left soit égal à 250 pixels :

Exemple

$("button").click(function(){ $("div").animate({left:&#39;250px&#39;}); });

<!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>

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) !

Déclaration：

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

Article précédent：Tutoriel d'amélioration de JavaScript - Résumé des exemples Native.jsArticle suivant：Tutoriel d'amélioration de JavaScript - Résumé des exemples Native.js

Articles Liés

Voir plus