2011-06-03 59 views
0

我在下面有下面的代碼。它在safari中可以正常工作,但是在IE中,背景只是旋轉一次,然後停在粉紅色上。jQuery的背景不重複在IE中

我錯過了什麼?

希望有人能幫助

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Iridescent Ideas</title> 
<style type="text/css"> 
html, body {height:100%; margin:0; padding:0;} 
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script> 
</head> 
<body> 

<center> 
<img src="logo.png" alt="Coming Soon" width="557" height="430" border="0" usemap="#Map" style="margin-top:100px;"> 
<map name="Map"> 
    <area shape="rect" coords="106,377,454,406" href="mailto:[email protected]" alt="Email"> 
</map> 
</center> 
<script type="text/javascript"> 
var colors = Array('#66ccff', '#ff99ff'); //List the hex codes you want to loop through here. 
var color_index = 0; 
var interval = 5000; //How long the color blend transition lasts. (in milliseconds, 1000 = 1 second) 

function bg_color_tween() { 
     $('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() { 
       if(color_index == colors.length) { color_index = 0; } //If we are at the end of the colors array go back to the beginning. 
       else { color_index++; } //Lets move to the next color in the colors array.s 

       bg_color_tween(); 
     }); 
} 

$(document).ready(function() { 
     if($(window).width() > 1024) { 
       //Kicks off the background color tweening. 
       bg_color_tween(); 
     } 
}); 
</script> 
</body> 
</html> 
+0

- 不是一個好主意。 – Pointy 2011-06-03 14:45:16

+1

乍一看,顏色旋轉一圈後會出現錯誤,因爲color_index將指向無效索引。嘗試將'if(color_index == colors.length)'改爲'if(color_index == colors.length - 1)' – WesleyJohnson 2011-06-03 14:45:24

+0

非常感謝Wesley的工作完美! – Miles 2011-06-05 07:56:59

回答

0

你可以嘗試的setTimeout拖延動畫你jQuery中的舊副本和jQueryUI的新副本拉動執行非常輕微

function bg_color_tween() { 
    $('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() { 
    if(color_index == (colors.length-1)) { //If we are at the end of the colors array go back to the beginning. 
     color_index = 0; 
    } else { //Lets move to the next color in the colors array.s 
     color_index++; 
    } 

    setTimeout('bg_color_tween', 5); 
    }); 
} 
0

在IE9其正常工作。應該沒有問題。您是在本地還是服務器環境中測試?