Question

我有一个php页面，其中包含一个在pageload上设置为true或false的变量。我想在变量为true时显示一个特定的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>';

 }

它显示是因为在你做fadein之前没有隐藏它。所以fadein没有效果（它已经存在）。

Answer 4

使用ready而不是load。

这是一个工作示例，但没有淡入，导致它始终显示

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

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

设置变量时显示div，让它在x秒后消失

4 个答案: