2011-12-09 26 views
0

我有一些jQuery隱藏半個div包含圖像,3秒後顯示圖像的全尺寸。它在FireFox和IE中非常適用,但不適用於Chrome。任何想法爲什麼?使用jQuery動畫製作一半覆蓋圖像

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1"> 
    <script src="jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="jquery.cookie.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     var status = "closed"; 
     var banner = jQuery.noConflict(); 
     banner(document).ready(function() { 
      var sliderHalfHeight = "46px"; 
      var sliderFullHeight = "86px"; 

      // set at half height 
      banner('#banner').css('height', sliderHalfHeight); 

      var autoTimer = null; 

      autoTimer = setTimeout(function() { 
       banner("#banner").animate({ height: sliderFullHeight }, 'slow'); 
       autoTimer = setTimeout(function() { 
        banner("#banner").animate({ height: sliderHalfHeight }); 
       }, 5000); 
      }, 2000); 

      banner("#open").click(function() { 
       if (status == "closed") { 
        banner("#banner").animate({ height: sliderFullHeight }); 
        if (autoTimer) clearTimeout(autoTimer); 
        autoTimer = null; 
        status = "open"; 
       } 
       else { 
        banner("#banner").animate({ height: sliderHalfHeight }); 
        if (autoTimer) clearTimeout(autoTimer); 
        autoTimer = null; 
        status = "closed"; 
       } 
      }); 


     }); 
    </script> 
</head> 
<body> 
     <div id="banner" style="overflow: hidden;"> 
      <img src="banner.jpg" runat="server" /> 
     </div> 
     <div id="open">Open/Close</div> 
</body> 
</html> 
+0

您的jQuery對象爲旗幟變量的使用使得代碼真正令人困惑的閱讀..沒有什麼 – Ben

+0

的一部分不能在Chrome中工作? – Ben

回答