php回显到html与jquery淡入淡出效果

I am trying to echo php to html, everything works fine but the echo stays on the page until refresh it goes away. anyway I can use jquery to fade in, out it?

part of the php coding:

$q1=mysql_query("SELECT `DEALS` FROM `show` LIMIT 1");
$d1=mysql_fetch_array($q1);
$n2=$d1['DEALS'];
if($n2!=0){

foreach($addresses as $to) { 
mail($to, $subject, $message, $headers);
}
echo'<center><span class="text-wrapper-2 text-wrapper-green">Email Sent!
</span></center>';
}
else{

echo'<center><span class="text-wrapper-2 text-wrapper-red">Email Failed</span></center>';    
}

so the code above echo correctly to html but I would like to add some jquery face effects to it. Any suggestions would be great.

Thanks to all in advance.

The JavaScript interaction happens entirely client-side, after the PHP is done. So essentially you'd echo the output and then do the client-side effects. So let's say you echo something like this:

<span class="text-wrapper-2 text-wrapper-green" id="emailMessage" style="display:none;">Email Sent!</span>

Note that I added an id to the element to make it easy to identify. I also gave it an in-line style to not display, since you want it to fade-in first. Feel free to move that styling into CSS as appropriate.

Then in your client-side code you might have something like this:

$('#emailMessage').fadeIn(400, function () {
    setTimeout(function () {
        $('#emailMessage').fadeOut();
    }, 5000);
});

This will fade the element in and then set a timer to fade it back out 5 seconds later.

wrap that into a div tag with a class you can select,

<div class="someClass" style="display:none">  your code here </div>

and have a script tag and put your javascript here

<script>
$(function(){
    $('.someClass').fadeIn();
});
</script>

then echo that code

This is just one way to do it. But do an ajax call to your php script and then display your results as you fade them in.

<script type="text/javascript">
    $(document).ready(function() {

        $('.buttonPush').on('click', function() (

            if (!$(this).hasClass('pushed'))
            {
                $('.buttonPush').addClass('pushed');

                $.ajax('/link/to/php/page', {


                }).done(function(data) {

                    $('.myElem').html('your html').fadeIn();

                    $('.buttonPush').removeClass('pushed');
                });
            }
        ));
    });
</script>

<div class="myElem">

</div>