Fonction qui permet de créer vos propres animations. L'aspect clé de cette fonction est l'objet composé des propriétés de style sur lesquelles seront basées l'animation. Chaque paramètre de l'objet représente une propriété sur laquelle portera l'animation (exemple: "height","top", ou "opacity").
A noter que ces propriétés devront être spécifiées comme suit: marginLeft au lieu de margin-left par exemple.
La valeur associée à la clé indique comment la propriété sera animée. Si la valeur est un nombre, le style de la propriété passera de sa valeur actuelle à la valeur spécifiée. Si la valeur hide, show ou toogle est spécifiée, une animation par défaut sera construite pour cette propriété. Seulement les propriétés qui contiennent des valeurs numériques sont supportées (par exemple la propriété backgrounColor n'est pas supportée).
Depuis jQuery 1.2, vous pouvez animer les propriétés en utilisant les mesures em et % (lorsqu'elles sont applicables).De plus, vous pouvez créer des animations relatives en utilisant "+=" ou "-=" devant la valeur de la propriété. Cela va faire évoluer l'élément positivement ou négativement depuis sa position actuelle.
Depuis jQuery 1.3, vous pouvez spécifier la durée d'une animation de 0. Dans ce cas, l'animation va placer l'ensemble des éléments concernés a leur été final en même temps (contrairement au anciennes versions ou il y avait un délai avant que tous les éléments soient placé a leur état final).
Version: disponible depuis la version 1.0 de JQuery
Paramétres:
Valeur de retour: jQuery
L'animation suivante joue avec plusieurs propriétés de l'élément.
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
});
</script>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Hello!</div>
</body>
</html>
Fonction qui permet de créer vos propres animations. L'aspect clé de cette fonction est l'objet composé des propriétés de style sur lesquelles seront basées l'animation. Chaque paramètre de l'objet représente une propriété sur laquelle portera l'animation (exemple: "height","top", ou "opacity").
A noter que ces propriétés devront être spécifiées comme suit: marginLeft au lieu de margin-left par exemple.
La valeur associée à la clé indique comment la propriété sera animée. Si la valeur est un nombre, le style de la propriété passera de sa valeur actuelle à la valeur spécifiée. Si la valeur hide, show ou toogle est spécifiée, une animation par défaut sera construite pour cette propriété.
Version: disponible depuis la version 1.0 de JQuery
Paramétres:
Valeur de retour: object jQuery
Le premier bouton montre un exemple d'animation non empilé : la première animation élargit le div à 90% pendant que la taille de la police (seconde animation) est éxécutée. La troisième (élargissement de la bordure), n'intervient quant à elle seulement une fois que les deux autres sotn terminés , due au fait qu'elle se trouve dans la pile d'éxécution des animations.
Le second bouton déclenche une animation chainée traditionnel, ou chaque animation attends que la précédente soit finie pour s'éxécuter.
$("#go1").click(function(){
$("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
.animate( { fontSize:"24px" }, 1500 )
.animate( { borderRightWidth:"15px" }, 1500);
});
$("#go2").click(function(){
$("#block2").animate( { width:"90%"}, 1000 )
.animate( { fontSize:"24px" } , 1000 )
.animate( { borderLeftWidth:"15px" }, 1000);
});
$("#go3").click(function(){
$("#go1").add("#go2").click();
});
$("#go4").click(function(){
$("div").css({width:"", fontSize:"", borderWidth:""});
});
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#go1").click(function(){
$("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
.animate( { fontSize:"24px" }, 1500 )
.animate( { borderRightWidth:"15px" }, 1500);
});
$("#go2").click(function(){
$("#block2").animate( { width:"90%"}, 1000 )
.animate( { fontSize:"24px" } , 1000 )
.animate( { borderLeftWidth:"15px" }, 1000);
});
$("#go3").click(function(){
$("#go1").add("#go2").click();
});
$("#go4").click(function(){
$("div").css({width:"", fontSize:"", borderWidth:""});
});
});
</script>
<style>
div {
background-color:#bca;
width:200px;
height:1.1em;
text-align:center;
border:2px solid green;
margin:3px;
font-size:14px;
}
button {
font-size:14px;
}
</style>
</head>
<body>
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<button id="go3">» Animate Both</button>
<button id="go4">» Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
</body>
</html>