ansaurus

Question

jQuery fadeout a div that's revealed by php and not Javascript?

Answer 1

+4 A:

If you're submitting the form and it's not via ajax, then your page is reloading, in which case you can do this:

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

This would wait 5 seconds then fade out the element, about as simple as it gets :) If it doesn't find the div with $(".thanks") then no problem, it just won't have anything to animate...meaning you can stick this in an external script without any issues.

Nick Craver 2010-04-27 23:31:11

Is `delay()` just a wrapper for `setTimeout()`... hmm is jQuery going to wrap every piece of native JavaScript? :P I suppose it looks more *jQuery* doing it this way (and is easier).

alex 2010-04-27 23:36:30

@alex - Not really, though it's similar, this adds a delay to a specific queue, when no name is passed it's the animation queue. For example: `.fadeIn().delay(2000).fadeOut()...` You could also use it as a delay inside any other queue if you wanted: http://api.jquery.com/delay/

Nick Craver 2010-04-27 23:40:00

So does that function go in a $(document).ready block in the header? I tried it with no luck. And is there other markup that goes in the body?

songdogtech 2010-04-28 00:57:35

@songdogtech - This code can go in any script block after jQuery is included in the page, the `$(function() { })` is equivalent to `$(document).ready(function() { })`. What's currently happening? and do you have a page I can get to by chance? that'd make finding the issue very fast.

Nick Craver 2010-04-28 01:08:55

Thanks, I'm puzzled; can't see what I need to see via Firebug. http://davidjamesduncan.com

songdogtech 2010-04-28 01:26:03

@songdogtech - You form submit via ajax, so in your `contact.js`, after this line in your post callback: `$(this).before('<p class="thanks">` on the next line, let me know if it gives any more trouble :)

Nick Craver 2010-04-28 01:32:56

Arrrgggg.... I was concentrating so much on index that I forgot about contact.js. You're right; it's already ajax. And your delay works fine. Thanks!

songdogtech 2010-04-28 01:49:26

Answer 2

+1 A:

Since the page is already loaded, you can print the fade out script in your ajax response:

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

Elie 2010-04-27 23:36:19

Answer 3

A:

Can't you just set the div to display:none? Then make it visible in the form submit code.

Pedery 2010-04-27 23:40:05

ansaurus

tags:

views:

answers:

jQuery fadeout a div that's revealed by php and not Javascript?

related questions