02-07-2010, 10:25 AM
jo_link_noir >
Dans un précédent exemple, j'ai utilisé les fonctions suivantes :
Intuitivement, je m'étais dis que ca devait faire comme tu l'as dis :
une action slow, une modification du text par "debut du test", quelques animations qui durent plusieurs secondes, une modification du text par "fin du test", puis finalement un slideUp
Mais là, grosse désillusion (qui m'a permit ensuite de comprendre le fonctionnement), l'ordre d'execution était le suivant :
une modification du text par "debut du test", une modification du texte par "fin du test", puis toutes les animations : action slow, quelques animations qui durent plusieurs secondes, et un slideUp final
pour t'en convaincre, je te laisse le code de nouveau. Il suffit de copier coller ce code sur une page.html pour l'essayer ^^.
Le code est très fortement inspiré par l'exemple de jquery ^^.
kéké
Dans un précédent exemple, j'ai utilisé les fonctions suivantes :
Code :
function runIt() {
$("div").show("slow");
$("div").html("debut du test");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").html("fin du test");
$("div").slideUp("normal", runIt);
}
runIt();</script>Intuitivement, je m'étais dis que ca devait faire comme tu l'as dis :
une action slow, une modification du text par "debut du test", quelques animations qui durent plusieurs secondes, une modification du text par "fin du test", puis finalement un slideUp
Mais là, grosse désillusion (qui m'a permit ensuite de comprendre le fonctionnement), l'ordre d'execution était le suivant :
une modification du text par "debut du test", une modification du texte par "fin du test", puis toutes les animations : action slow, quelques animations qui durent plusieurs secondes, et un slideUp final
pour t'en convaincre, je te laisse le code de nouveau. Il suffit de copier coller ce code sur une page.html pour l'essayer ^^.
Code :
<!DOCTYPE html>
<html>
<head>
<style>div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
span { color:red; } </style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
<script>$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").html("debut du test");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").html("fin du test");
$("div").slideUp("normal", runIt);
}
runIt();</script>
</body>
</html>Le code est très fortement inspiré par l'exemple de jquery ^^.
kéké