jQuery fadeout a div that's revealed by php and not Javascript?_问答_开发者

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

开发者 https://www.devze.com 2022-12-28 15:31 出处：网络

Seems like this might be easy, but from reading other SO answers there are a number of ways for it to possibly work:

I have the "thanks" div below that shows when a php form is sucessfully submitted:

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

The page does not reload after the form is submitted; the php for the form is included in the page header, the php above is in <body>, and when the form is开发者_JAVA技巧 submitted, the "thanks" div appears.

Question: How can the div be faded out (or simply removed) after a few seconds?

Document ready doesn't seem like it would work because the page is not reloaded. Can jQuery detect the appearance of the div and then start the fadeout timer?

If possible, I'd like to stay with the php form and not move to a jQuery form.

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.

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>
...

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