php - 设置变量时显示一个 div 并让它在 x 秒后消失

Question

我有一个 php 页面，其中的变量在页面加载时设置为 true 或 false。我想在变量为真时显示一个特定的 div，然后 div 在 x 秒后消失。当它为假时，div 保持隐藏状态。

我的代码显示了 div，但它在 x 秒后并没有消失。

    if($showNotification == TRUE){
        echo "<div class='notification'>notification!!</div>";
        echo '<script type="text/javascript">
                 $(document).load(
                    function() {
                       $("div.notification").fadeIn();
                       setTimeout(function() {
                          $("div.notification").fadeOut("slow");
                       }, 3000); 
                  });  
              </script>';

     }

Answer 1

用这个替换你的JS：

$(function() {
    $('div.notification').hide().fadeIn().delay(3000).fadeOut('slow');
});  

演示：http: //jsfiddle.net/nEsg9/

Answer 2

而不是使用：

$(document).load( ...

采用

$(document).ready( ...

Answer 3

if($showNotification == TRUE){
    echo "<div class='notification' style='display:none'>notification!!</div>";
    echo '<script type="text/javascript">
             $(document).load(
                function() {
                   $("div.notification").fadeIn();
                   setTimeout(function() {
                      $("div.notification").fadeOut("slow");
                   }, 3000); 
              });  
          </script>';

 }

它显示是因为在您进行淡入淡出之前它没有被隐藏。所以淡入淡出没有效果（它已经存在）。

Answer 4

使用准备好而不是加载。

这是一个工作示例，但没有淡入，因为它总是显示

http://jsfiddle.net/2JKxr/1/

$(document).ready(
            function() {
               $("div.notification").fadeIn();
               setTimeout(function() {
                  $("div.notification").fadeOut("slow");
               }, 3000); 
          });