2010-04-27 5 views
1

On dirait que cela pourrait être facile, mais à la lecture d'autres réponses SO il y a un certain nombre de façons pour que cela fonctionne peut-être:jQuery fadeout une div qui est révélée par php et pas Javascript?

je les « merci » div ci-dessous qui montre quand une forme de php est sucessfully soumis:

<?php if(isset($emailSent) && $emailSent == true) { ?> 
<div class="thanks"></div> 

La page ne se recharge pas après la soumission du formulaire; le php pour le formulaire est inclus dans l'en-tête de la page, le php ci-dessus est dans <body>, et quand le formulaire est soumis, le "merci" div apparaît.

Question: Comment le div est fané dehors (ou tout simplement supprimé) après quelques secondes?

document prêt ne semble pas que cela fonctionnerait parce que la page n'est pas rechargées. Est-ce que jQuery peut détecter l'apparence de la div puis démarrer la minuterie de fadeout?

Si possible, je voudrais rester avec la forme php et ne se déplace pas à une forme jQuery.

Répondre

4

Si vous soumettez le formulaire et ce n'est pas via ajax, votre page est rechargeait, dans ce cas, vous pouvez le faire:

$(function() { 
    $(".thanks").delay(5000).fadeOut(); 
}); 

Cela attendre 5 secondes disparaître ensuite l'élément, à propos de Si elle ne trouve pas la div avec $(".thanks") alors pas de problème, elle n'aura rien à animer ... ce qui signifie que vous pouvez coller ceci dans un script externe sans aucun problème.

+0

est 'retard()' juste un wrapper pour 'setTimeout()' ... hmm est jQuery va envelopper chaque morceau de JavaScript natif? : P Je suppose que cela semble plus * jQuery * le faire de cette façon (et c'est plus facile). – alex

+0

@alex - Pas vraiment, bien que ce soit similaire, cela ajoute un délai à une file d'attente spécifique, quand aucun nom n'est passé, c'est la file d'attente d'animation. Par exemple: '.fadeIn(). Delay (2000) .fadeOut() ...' Vous pouvez également l'utiliser comme délai dans n'importe quelle autre file d'attente si vous le souhaitez: http://api.jquery.com/delay/ –

+0

Alors, cette fonction va-t-elle dans un bloc $ (document) .ready dans l'en-tête? Je l'ai essayé sans aucune chance. Et y a-t-il d'autres balisages qui vont dans le corps? – markratledge

1

Depuis la page est déjà chargée, vous pouvez imprimer le fondu script dans votre réponse ajax:

<?php if(isset($emailSent) && $emailSent == true) { ?> 
<div class="thanks"></div> 
<script type="text/javascript"> 
$(".thanks").delay(5000).fadeOut(); 
</script> 
... 
0

tu ne peux pas régler la div pour afficher: aucun? Puis le rendre visible dans le formulaire de soumission de code.