Hi,
Wondering if someone can offer advice.
I've set up a simple tween using TweenMax. It works great in Firefox etc but, in IE8, the animation is very jerky to the point where I don't think it's usable.
I've checked out this forum (and the web in general) for any info. or fixes that might be available but can't find any solution.
I wonder if anyone else has had this problem? I'm a newbie to this so maybe I've done something wrong.
My HTML and JS code is shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>"]http://www.w3.org/TR...nsitional.dtd">[/url]
<html xmlns="[url="http://www.w3.org/1999/xhtml%22>"]http://www.w3.org/1999/xhtml">[/url]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="[url="http://code.jquery.com/jquery-1.7.1.min.js%22></script>"]http://code.jquery.c...n.js"></script>[/url]
<script type="text/javascript" src="src/minified/TweenMax.min.js"></script>
<style type="text/css">
html, body {
overflow:hidden;
margin:0;
}
#nav{
position:fixed;
left:0;
bottom:0px;
width:100%;
height:70px;
background-color:#000;
z-index:100;
font-family:Arial, Helvetica, sans-serif;
border-top:#fff 1px solid;
}
#centre_nav{
width:300px;
margin-left:auto;
margin-right:auto;
}
#nav ul{
list-style-type:none;
color:#fff;
margin:0;
padding:0;
}
#nav li{
padding-top:5px;
float:left;
}
#main_pic{
position:absolute;
left:0px;
}
</style>
</head>
<body>
<div id="nav">
<div id="centre_nav">
<ul>
<li><a href="#" class="main" onclick="go_home()"><img src="images/home_btn.jpg" width="96" height="45" /></a></li>
<li><a href="#" class="main" onclick="go_about()"><img src="images/about_btn.jpg" width="96" height="45" /></a></li>
<li><a href="#" class="main" onclick="go_contact()"><img src="images/contact_btn.jpg" width="96" height="45" /></a></li>
</ul>
</div>
</div>
<div id="main_pic"><img src="images/tattoo-4-bw.jpg" width="1800" height="531" id="header"/></div>
<script language="Javascript" type="text/javascript">
function go_contact(){
var main_pic = document.getElementById("main_pic");
TweenLite.to(main_pic, 0.5, {css:{left:"1800px"}});
}
</script>
</body>
</html>