开发者

jquery background not repeating in IE

I have this code below. It works fine in safari however in IE the background just revolves once and stops on pink.

What am I missing?

Hope someone can help

<!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>


You could try setTimeout to delay the execution of the animation ever so slightly

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


In IE9 its working normally. There should be no problem. Are you testing in local or server environment?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜