fonction d'animation personnalisée jQuery
Animation jQuery - 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 obligatoire 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 <div> vers la gauche jusqu'à ce que l'attribut left soit égal à 250 pixels :
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</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>
Astuce : Par défaut, tous les éléments HTML ont une position statique et ne peuvent pas être déplacés. Si vous souhaitez opérer sur la position, pensez à définir d'abord la propriété CSS position de l'élément sur relatif, fixe ou absolu !
jQuery animate() - Manipuler plusieurs attributs
Veuillez noter que plusieurs attributs peuvent être utilisés en même temps lors de la génération d'animation :
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.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>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
Astuce : Vous pouvez utiliser la méthode animate() pour manipuler toutes les propriétés CSS. Cependant, il y a une chose importante à retenir : lorsque vous utilisez animate(), vous devez utiliser la méthode animate(). Balise Camel Tous les noms de propriétés ne peuvent pas être écrits, par exemple, paddingLeft doit être utilisé à la place de padding-left, marginRight doit être utilisé à la place de margin-right, etc. De plus, l'animation couleur n'est pas incluse dans la bibliothèque principale jQuery. Si vous devez générer des animations en couleurs, vous devez télécharger le plug-in Color Animations depuis jQuery.com.
jQuery animate() - Utilisation de valeurs relatives
Vous pouvez également définir des valeurs relatives (le la valeur est relative à la valeur actuelle de l'élément). Vous devez ajouter += ou -= devant la valeur :
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</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>
jQuery animate() - utilise des valeurs prédéfinies
Vous pouvez même animer la valeur de la propriété pour "afficher", "masquer" ou "basculer" :
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</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>
jQuery animate() - Utilisation de la fonction de file d'attente
Par défaut, jQuery fournit une fonction de file d'attente pour l'animation. Cela signifie que si vous écrivez plusieurs appels animate() les uns après les autres, jQuery crée une file d'attente "interne" contenant ces appels de méthode. Exécutez ensuite ces appels animés un par un.
Exemple : Si vous souhaitez effectuer différentes animations les unes après les autres, alors nous souhaitons profiter de la fonction de file d'attente
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.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>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
