[Résolu] Jquery Delay VS Javascript setTimeout

édité à 17h30 pour des soucis de compréhension

Salut les gens,
Je débute en jquery et javascript et j'ai un petit souci avec les fonction de "délais"... je m'explique :
J'ai fais ma petite sauce pour animer une div (tout fonctionne correctement) seulement j'aimerais lancer l'animation quelques secondes après le chargement de la page et non immédiatement (comme actuellement)...
j'ai tenté avec la fonction Delay de Jquery mais ça ne donne rien...
Voici mon code :

$(document).ready(function(){
     
   $("#sliders>*").show(); 
 
   $("#popup").delay(3000).animate({top:'0px'}, {queue:false, duration:1500, easing: 'easeOutBounce'});   
 
   $("a.close").click(function(){    
		$("#popup").animate({top:'-500px'}, {queue:false, duration:600, easing: 'easeInExpo'});  
   });
}); 

le lien vers la page


J'ai également tenté le coup avec la fonction JavaScript setTimeout mais j'ai également du faire une erreur de syntaxe car même résultat...
Si quelqu'un pouvait m'aider je lui en serait reconnaissant...

$(document).ready(function(){ 
     
    $("#sliders>*").show();  

    setTimeout($("#popup").animate({top:'0px'}, {queue:false, duration:1500, easing: 'easeOutBounce'}),5000);   
 
    $("a.close").click(function(){    
		$("#popup").animate({top:'-500px'}, {queue:false, duration:600, easing: 'easeInExpo'});  
    });
}); 

le lien vers la page


Merci.
Modifié par cruchovic (18 Oct 2012 - 10:23)

Je serai tenté de dire :

setTimeout("$('#popup').stop().animate({top:'0px'}, {queue:false, duration:1500, easing: 'easeOutBounce'})", 5000);

A quoi sert ton .stop() ?
Modifié par Klesk (17 Oct 2012 - 16:41)

Salut Klesk et merci pour ta réponse...
J'ai fais du ménage dans mon code et essayer ta suggestion mais ça ne fonctionne toujours pas...
voici la partie Java en question

$(document).ready(function(){ 
     
  $("#sliders>*").show();
  
  setTimeout($("#popup").animate({top:'0px'}, {queue:false, duration:1500, easing: 'easeOutBounce'}),5000);  
  
  $("a.close").click(function(){    
		$("#popup").animate({top:'-500px'}, {queue:false, duration:600, easing: 'easeInExpo'});  
  });
}); 

.stop() ne sert à rien dans le cas présent
Modifié par cruchovic (17 Oct 2012 - 17:18)

J'ai testé mon code sur ta page avec la console firefox et ça marche impec . La fonction dans le timeout est entre guillemets en revanche et le #popup doit être mis entre guillemets simples exactement comme dans mon exemple.

Sur ta page il y a aussi un souci sur ton sélecteur, tu met $("#sliders>*").show(); au lieu de $("#sliders>*").show(); . D'ailleurs à quoi sert cette partie ?

Essai avec ça :

$(document).ready(function(){      
  $("#sliders").show();  
  setTimeout("$('#popup').animate({top:'0px'}, {queue:false, duration:1500, easing: 'easeOutBounce'})", 5000);    
  $("a.close").click(function(){    
		$("#popup").animate({top:'-500px'}, {queue:false, duration:600, easing: 'easeInExpo'});  
  });
}); 

Modifié par Klesk (17 Oct 2012 - 19:23)

Merci Klesk ça marche nikel

en fait j'avais utiliser la fonction show() car à la base j'avais imaginé 2 div avec l'id #sliders qui étaient par défaut en display:inline-block et qui pouvait être réinitialisées (pour rejouer le retour).
J'avais lu que la fonction show() servait de soupape de sécurité pour palier à des bugs liés au display en CSS...
Bon après je suis vraiment débutant en JavaScript et Jquery J'ai commencé depuis 1 mois environ et se sont quasiment mes premières lignes que tu peux voir dans mon billet.

je ne suis pas vraiment du métier à la base et n'ai jamais reçu d'enseignement lié au codage, à l'intégration et au développement...
Du coup je lie/pioche à droite et à gauche sans vraiment toujours maitriser/comprendre toutes les subtilités des instructions que j'écris/colle

hop le résultat ici (j'ai descendu le delay à 2000)
Modifié par cruchovic (18 Oct 2012 - 09:39)

De rien. Si ça peut te rassurer je me suis mis à JQuery plus sérieusement en août pour un projet précis. Je n'avais fais que très peu de JS avant. J'utilisais surtout des sources toutes prêtes.

Comme quoi ça vient assez vite . J'aime beaucoup ton panel qui tombe.

Merci à toi,
Au plaisir de se recroiser sur le fofo