[JQuery] - Attente de la fin d'un fadeIn()
Nightswords
Messages postés
10
Date d'inscription
Statut
Membre
Dernière intervention
-
piero -
piero -
Bonjour,
Voila je cherche à réaliser une animation en Javascript - JQuery. Le but est d'afficher dans un rectangle ou carré pleins de petits carrés les uns après les autres avec un effet fadeIn().
Pour cela je calcul donc le nombre de carrés par ligne puis le nombre de lignes à faire pour tout remplir. Les carrés faisant 30px de côté.
Je cherche à automatiser mon code que voici :
Xhtml :
Voici le Javascript :
var id_case = 1; //Id de la case
var nb_case_line = 1; //Nombre de cases par diagonale
$(document).ready(function() {
$("#button").click(function(){
var width_div = $("#containt").width(); //Récupère la largeur de mon rectangle
var height_div = $("#containt").height(); //Récupère la hauteur de mon rectangle
var nb_case_horiz = width_div/30; //Calcul du nombre de colonnes
var nb_case_vert = height_div/30; //Calcul du nombre de lignes
var nb_case = nb_case_horiz*nb_case_vert; //Calcul du nombre total de cases
for(var i=1;i<=nb_case_vert;i++) //Instruction pour chaque lignes
{
for( var j=1;j<=nb_case_horiz;j++) //Instruction pour chaque colonnes
{
$("#containt").append("<div id='case_"+id_case+"'></div>"); //On créer une div
$("#case_"+id_case).css({ float: "left", width: "30px", height: "30px", background: "#000000", display: "none"}); //On lui attribut un css
id_case++; //On incrémente id_case
}
}
$("#containt").each(function(){
$("div").fadeIn(1000);
});
});
});
Explication du problème :
Le navigateur m'affiche un seul fadeIn() de toutes les divs créées et non pas les unes après les autres.
- J'ai essayé à la place du each :
même effet.
- J'ai essayer de placer
- J'ai essayer au même endroit de mettre:
même effet !
Je me tourne donc vers vous pour sollicité l'aide de quelqu'un qui aurait une idée pour résoudre mon problème. Merci d'avance du temps que vous m'avez accordé.
Cordialement,
Voila je cherche à réaliser une animation en Javascript - JQuery. Le but est d'afficher dans un rectangle ou carré pleins de petits carrés les uns après les autres avec un effet fadeIn().
Pour cela je calcul donc le nombre de carrés par ligne puis le nombre de lignes à faire pour tout remplir. Les carrés faisant 30px de côté.
Je cherche à automatiser mon code que voici :
Xhtml :
<body> <div id="button"></div> <div id="containt"></div> </body>
Voici le Javascript :
var id_case = 1; //Id de la case
var nb_case_line = 1; //Nombre de cases par diagonale
$(document).ready(function() {
$("#button").click(function(){
var width_div = $("#containt").width(); //Récupère la largeur de mon rectangle
var height_div = $("#containt").height(); //Récupère la hauteur de mon rectangle
var nb_case_horiz = width_div/30; //Calcul du nombre de colonnes
var nb_case_vert = height_div/30; //Calcul du nombre de lignes
var nb_case = nb_case_horiz*nb_case_vert; //Calcul du nombre total de cases
for(var i=1;i<=nb_case_vert;i++) //Instruction pour chaque lignes
{
for( var j=1;j<=nb_case_horiz;j++) //Instruction pour chaque colonnes
{
$("#containt").append("<div id='case_"+id_case+"'></div>"); //On créer une div
$("#case_"+id_case).css({ float: "left", width: "30px", height: "30px", background: "#000000", display: "none"}); //On lui attribut un css
id_case++; //On incrémente id_case
}
}
$("#containt").each(function(){
$("div").fadeIn(1000);
});
});
});
Explication du problème :
Le navigateur m'affiche un seul fadeIn() de toutes les divs créées et non pas les unes après les autres.
- J'ai essayé à la place du each :
$.each( "#containt", function(){
$("div").fadeIn(1000,);
});
même effet.
- J'ai essayer de placer
$("#case_"+id_case).fadeIn(1000); juste après l'attribution du CSS à la div créée et juste avant l'incrémentation de Id_case dans les boucles for(), cela donne le même résultat.
- J'ai essayer au même endroit de mettre:
$("#case_"+id_case).fadeIn(1000,function(){
return;
});
même effet !
Je me tourne donc vers vous pour sollicité l'aide de quelqu'un qui aurait une idée pour résoudre mon problème. Merci d'avance du temps que vous m'avez accordé.
Cordialement,
A voir également:
- [JQuery] - Attente de la fin d'un fadeIn()
- Fin des zfe - Guide
- Fin de la 4g en france - Accueil - Guide opérateurs et forfaits
- Messenger en attente de reseau - Forum Mobile
- Fin de l'archive incorrecte - Forum Compression
- Fin du partage de compte disney + - Accueil - Streaming