jquery动画和Internet explorer 8的问题答案

【问题标题】：Problem with jquery animation and Internet explorer 8jquery动画和Internet explorer 8的问题
【发布时间】：2011-07-07 18:47:05
【问题描述】：

今天晚上我非常努力地尝试理解html位置和jquery动画a我做了一个HTML页面如下：

<html>
<head>

<script src="jquery-1.5.1.min.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
    background-image: url(Cartoon_Landscape2.jpg);
}

</style>


<script type="text/javascript">
function moveDIV ( obj, x, y ) {
var element = document.getElementById(obj);
element.style.left=x;
element.style.top=y;
}

var t;

function anim1()
{
moveDIV("mariposa", screen.availWidth, screen.availHeight);
$("#mariposa").animate({left: '-84', top: '-58'}, 10000);

t=setTimeout("anim1()",22000);

//moveDIV("mariposa2", '-84', screen.availHeight);
//$("#mariposa2").animate({left: screen.availWidth, top: '-58'}, 10000);
}

function anim2()
{
moveDIV("mariposa2", '-84', screen.availHeight);
$("#mariposa2").animate({left: screen.availWidth, top: '-58'}, 10000);

t=setTimeout("anim2()",22000);

}

function callfunctions()
{
moveDIV("mariposa2", '-84', screen.availHeight);
anim1();
var b=setTimeout("anim2()",11000);
}
</script> 



</head>
<body  onLoad="javascript:callfunctions();"     >



<div id="mariposa" style="position:fixed; overflow: hidden;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" name="mariposa" width="84" height="58" align="top">
<param name=movie value="mariposa.swf">
<param name=wmode value=transparent>
<param name=quality value=high>
<embed src="mariposa.swf" width="84" type="application/x-shockwave-flash" height="58" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" wmode="transparent" align="top" name="mariposa">
</embed>
</object>
</div>

<div id="mariposa2" style="position:fixed; overflow: hidden;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" name="mariposa2" width="-84" height="58" align="top">
<param name=movie value="mariposa2.swf">
<param name=wmode value=transparent>
<param name=quality value=high>
<embed src="mariposa2.swf" width="84" type="application/x-shockwave-flash" height="58" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" wmode="transparent" align="top" name="mariposa2">
</embed>
</object>
</div>

</body>
</html>

因此页面显示了一个从屏幕左侧和右侧对角线运动的 Flash 动画。

对我来说非常完美，在 firefox、opera、safari、chome 上运行良好，但在 internet explorer 8 上却不行！！，我能做些什么来解决这个问题？ =(

附：如果我在两个 DIV 中都使用绝对位置，则动画可以在 Internet Explorer 上运行，但会创建不必要的滚动条。

谢谢

【问题讨论】：

标签： javascript jquery html animation

【解决方案1】：

我发现在您的示例代码中可能会导致各种问题：

1。 JavaScript

首先，您几乎没有使用任何 jQuery。既然您已经在使用 jQuery，那么您不妨充分利用它并为自己省去很多麻烦。例如，而不是实现自己的 moveDIV() 函数，您可以使用：

$("#id").css({left: 10, top: 10});

几乎与您在代码中使用 .animate() 的方式完全相同。你也可以使用 offset() 这取决于什么对你更好：

$("#id").offset({left: 10, top: 10});

了解.offset()、.css() 和 .animate() 在jQuery API docs。

顺便说一句，不要使用：

setTimeout("anim1()",22000);

最好用：

setTimeout(anim1, 22000);

它做同样的事情，但效率更高。

2。 CSS

您可以尝试使用 position: absolute 或 position: relative 进行试验，其中有 position: fixed。

3。 HTML

您没有 doctype，IE 可能会尝试以 quirks 模式呈现您的页面。要使用标准模式，请在 HTML 的开头添加一个文档类型：<!doctype html>

事实上，IE8 甚至可以使用 IE7 渲染引擎，如果它认为它对您的网站会更好的话。如果你想确保你总是被 IE 中最好的渲染引擎渲染，你还应该添加：<meta http-equiv="X-UA-Compatible" content="IE=Edge">

此外，当您确保您的网站在 IE8 上运行时，您还可以使用 Google Chrome Frame 插件（如果可用）：<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">

总而言之，HTML 的开头应该是这样的

<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
  ... and the rest of your HTML

这些只是我在您的代码中看到的可以考虑更改的主要内容。我不知道这样做是否可以解决您的问题，但即使没有，也可以让您免于以后处理其他问题。

【讨论】：