PHP的回声到HTML与jQuery淡入淡出效果

Question

我正在尝试将php回显到html，一切正常，但是回显会保留在页面上，直到刷新消失为止。 无论如何，我可以使用jQuery淡入淡出吗？

PHP编码的一部分：

$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>';    
}

所以上面的代码正确地回显到html，但是我想向其中添加一些jquery效果。 任何建议都很好。

在此先感谢所有。

Answer 1

将其包装到带有您可以选择的类的div标签中，

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

并有一个脚本标签，然后将您的JavaScript放在这里

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

然后回显该代码

Answer 2

在完成PHP之后，JavaScript交互完全在客户端进行。 因此，从本质上讲，您将回显输出，然后执行客户端效果。 假设您回声如下：

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

请注意，我在元素中添加了一个id ，以使其易于识别。 我还给了它一种不显示的内联样式，因为您希望它先淡入。 可以将样式适当地移到CSS中。

然后，在您的客户端代码中，您可能会有类似以下内容：

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

这将使该元素淡入，然后设置一个计时器以在5秒后使其淡出。

Answer 3

这只是做到这一点的一种方法。 但是对您的php脚本进行ajax调用，然后在淡入结果时显示结果。

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