问题与jQuery动画和Internet Explorer 8 [英] Problem with jquery animation and Internet explorer 8
问题描述
今天晚上我很努力试图理解HTML位置和jQuery动画我做了一个HTML页面如下：
this evening I worked very hard trying to understand html positions and jquery animation a I did an HTML page as follows:
<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动画。
So the page shows a flash animation with diagonal motion from the left and from the right of screen.
和很适合我，在Firefox，歌剧，野生动物园，工作丁目不错，但不是在Internet Explorer 8！，我能做些什么来解决这个问题？ =（
And was perfect for me, and works nice on firefox, opera, safari , chome, but not on internet explorer 8!!, what can I do to fix this problem? =(
P.S。如果我用在这两个资料核实的绝对位置，在动漫作品的Internet Explorer但制造了不必要的滚动条。
P.S. if I use absolute position in both DIVs, the animation works on internet explorer but unnecessary scrollbars are created.
感谢
推荐答案
我看到一些事情，可能会导致各种问题，在您的示例code：
I see few things that may lead to various problems in your example code:
首先，你几乎没有使用任何的jQuery的。既然你已经使用jQuery，那么你不妨用它来充分延伸，为自己节省很多麻烦。例如，
而不是实现自己的moveDIV（）函数，你可以使用：
First of all, you are barely using any jQuery at all. Since you are already using jQuery then you might as well use it to its full extend and save yourself a lot of headaches. For example, instead of implementing your own moveDIV() function you can use:
$("#id").css({left: 10, top: 10});
几乎一模一样您如何在code使用.animate（）。你也可以使用偏移（）为依据什么是你最好：
almost exactly how you use .animate() in your code. You can also use offset() for that depending what is better for you:
$("#id").offset({left: 10, top: 10});
阅读 .offset（） ，的 的.css（） 并
.animate（） 中的jQuery API文档。
顺便说一下，代替使用
setTimeout("anim1()",22000);
这是更好地使用：
it's better to use:
setTimeout(anim1, 22000);
它做同样的事情，但更有效。
It does the same thing but is more efficient.
您可以尝试用位置进行试验：绝对或的位置是：相对，你必须位置：固定
You may try to experiment with position: absolute or position: relative where you have position: fixed.
您没有任何的doctype与IE浏览器可能会尝试使你的网页在怪癖模式。要使用标准模式下HTML的最开始添加的文档类型：<！code>＆LT; DOCTYPE HTML＆GT;
You have no doctype and the IE may try to render your page in quirks mode. To use standards mode add a doctype at the very beginning of your HTML: <!doctype html>
在事实上IE8它甚至可能使用IE7渲染引擎，如果它认为这将是为您的网站更好。如果你想确保你总是在IE中最好的渲染引擎，你还应该添加渲染：＆LT; META HTTP-EQUIV =X-UA-Compatible的内容=IE =边缘 ＆GT;
In fact IE8 it may even use the IE7 rendering engine if it thinks it would be better for your website. If you want to make sure that you are always rendered by the best rendering engine in IE you should also add: <meta http-equiv="X-UA-Compatible" content="IE=Edge">
此外，当你确保你的网站工作在IE8，那么你也可以把它使用谷歌浏览器框架如果它是可用的插件：＆LT; META HTTP-EQUIV =X-UA-Compatible的内容=IE =边缘;铬= 1＆GT;
Also, when you make sure that your website works on IE8 then you can also make it use the Google Chrome Frame plugin if it is available: <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
所有的一切，你的HTML的开始应该是这个样子。
All in all, the beginning of your HTML should look something like this
<!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
这些只是我看到的主要的东西在你的code，你可能会考虑改变。我不知道这样做解决您的问题，但即使没有它可能不必处理其他问题后释放你。
Those are just the main things I see in your code that you may consider changing. I don't know if doing it solves your problem but even if it doesn't it may free you from having to deal with other problems later.
这篇关于问题与jQuery动画和Internet Explorer 8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
