Fade in fade out en javascript

Je continue le travail sur: https://codereview.stackexchange.com/questions/7315/fade-in-and-fade-out-in-pure-javascript

Quelle est la meilleure façon de détecter si le fade in ou fade-out est terminé avant de définir une nouvelle fonction. C'est ma façon, mais je suppose qu'il est beaucoup mieux?

J'ai ajouté de l'alerte pour le rendre plus facile pour vous de voir.

Pourquoi je veux faire, c'est parce que: Si l'on appuie sur les boutons avant la boucle for a finnished, l'animation sera une mauvaise image.

Je veux que les boutons ne fonctionnent que lorsque l'fadeing est terminé.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
<span id="fade_in">Fade In</span> | 
<span id="fade_out">Fade Out</span></div>
<div id="fading_div" style="display:none;height:100px;background:#f00">Fading Box</div>
</div>
</div>
<script type="text/javascript">
var done_or_not = 'done';
//fade in function
function function_opacity(opacity_value, fade_in_or_fade_out) { //fade_in_or_out - 0 = fade in, 1 = fade out
document.getElementById('fading_div').style.opacity = opacity_value / 100;
document.getElementById('fading_div').style.filter = 'alpha(opacity='+opacity_value+')';
if(fade_in_or_fade_out == 1 && opacity_value == 1)
{
document.getElementById('fading_div').style.display = 'none';
done_or_not = 'done';
alert(done_or_not);
}
if(fade_in_or_fade_out == 0 && opacity_value == 100)
{
done_or_not = 'done';
alert(done_or_not);
}
}
window.onload =function(){
//fade in click
document.getElementById('fade_in').onclick = function fadeIn() {
document.getElementById('fading_div').style.display='block';
var timer = 0;
if (done_or_not == 'done')
{
for (var i=1; i<=100; i++) {
set_timeout_in = setTimeout("function_opacity("+i+",0)", timer * 10);
timer++;
done_or_not = 'not_done'
}
}
};
//fade out click
document.getElementById('fade_out').onclick = function fadeOut() {
clearTimeout(set_timeout_in);
var timer = 0;
if (done_or_not == 'done')
{
for (var i=100; i>=1; i--) {
set_timeout_out = setTimeout("function_opacity("+i+",1)", timer * 10);
timer++;
done_or_not = 'not_done'
}
}
};
}//END window.onload
</script>
</body>
</html>
Pouvez-vous utiliser jQuery? Il permet le chaînage des événements très facile.
Pourquoi écrivez-vous par vous-même, quand il y a beaucoup de maturité javascript animation des bibliothèques. Par exemple jQuery a certaines construites en effet. script.aculo.nous, c'est un autre populaire JS animation lib.
jQuery met également en œuvre fadein/out dans les anciennes versions d'IE. Votre opacité de manipulation n'jouer.
Ou si vous voulez apprendre la meilleure façon de le faire peut être vous pouvez étudier la source de ces bibliothèques. La plupart d'entre eux sont open source.
Désolé pour ce "pourquoi" de commentaires, mais je me demande si vous voulez vraiment faire le visiteur attendre jusqu'à ce que l'animation est terminée, ce qui peut prendre quelques secondes. Lorsque j'appuie sur le bouton, je veux toujours l'action à prendre place dès maintenant. Si votre code doit fade que tout sera terminé à temps, vous pouvez vous forcer à être complet. Si vous avez déjà examiné et rejeté cette idée, je m'excuse pour le détour.

OriginalL'auteur Hakan | 2011-12-30