Animation jQuery
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);
Obligatoire Le paramètre params 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(). Il déplace l'élément <div> de 250 pixels vers la droite?:
Exemple
<!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>開始動(dòng)畫</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Exécutez le programme et essayez-le
Astuce?: Par défaut, tous les éléments HTML ont une position statique et ne sont pas mobiles. Si nous devons le modifier, nous devons définir l'attribut 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 de l'animation?:
<!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>開始動(dòng)畫</button>
<div style="background:#4ae936;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Exécutez le programme pour l'essayer
jQuery animate () - Des valeurs relatives peuvent également être définies (la valeur est relative à la valeur actuelle de l'élément) en utilisant des valeurs relatives
. Vous devez ajouter += ou -= devant la valeur?:
<!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>開始動(dòng)畫</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Exécutez le programme pour l'essayer
jQuery animate() - utilisez le prédéfini valeurs
Vous pouvez même animer la valeur d'une propriété pour "afficher", "masquer" ou "basculer"?:
<!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>開始動(dòng)畫</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Exécutez le programme pour l'essayer
jQuery animate() - Utilisation de la fonctionnalité 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>開始動(dòng)畫</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Exécutez le programme et essayez-le
L'exemple suivant déplace l'élément <div> vers la droite de 100 pixels, puis augmente la taille de la police du texte?:
<!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({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>開始動(dòng)畫</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>Exécuter Essayez le programme
