Problem with jquery animation and Internet explorer 8
thi开发者_Go百科s 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>
So the page shows a flash animation with diagonal motion from the left and from the right of screen.
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. if I use absolute position in both DIVs, the animation works on internet explorer but unnecessary scrollbars are created.
Thanks
I see few things that may lead to various problems in your example code:
1. JavaScript
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});
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});
Read about .offset(), .css() and
.animate() in the jQuery API docs.
By the way, instead of using:
setTimeout("anim1()",22000);
it's better to use:
setTimeout(anim1, 22000);
It does the same thing but is more efficient.
2. CSS
You may try to experiment with position: absolute or position: relative where you have position: fixed.
3. HTML
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>
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">
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">
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
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.
加载中,请稍侯......
精彩评论