Question

我在下面有这个代码。它在safari中运行良好，但在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:gareth@iridescentideas.com" 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>

Answer 1

在IE9中它正常工作。应该没问题。您是在本地或服务器环境中进行测试吗？

Answer 2

您可以尝试使用setTimeout来稍微延迟动画的执行

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);
  });
}

jquery背景在IE中不重复

2 个答案: