jQuery animation problem

elmu · 02-14-2011, 02:40 PM

Hello,

I have a site design where I want to make an animation on a box to make it wider in case of mouseover and back to it's original size in case of mouseout.

I use jQuery to make the animation. It works fine in every browser except IE8s.
In IE8 after the animation there are some garbage vertical lines on the area where the box was opened.

I tried to make my code as small as possible to demonstarte the problem:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
   <title>Test</title> 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
   <style type="text/css">
* {
	padding:0;
	margin:0;
}
   
html, body {
    height:100%;
    width:100%;
}
	
body {
	background-color: #ccc;
}

#mainBg {
	height:200px;
	margin-top:50px;
	background-color:#000;
}

#wrapper {
	width:1000px;
	margin: 0px auto;
	margin-top:-250px;
}

#content {
	width:600px;
	background-color: #f4f4f4;
	float:left;
	min-height:700px;
}

.box {
	width:400px;
}
   
.boxContent {
	padding:40px;
	background-color: #fff;
	overflow:hidden;
}

</style>   
</head> 
 
<body> 
	<div id="mainBg"></div>
		
	<div id="wrapper">
		<div id="content">
			<div class="box">
				<div class="boxContent" onmouseover="openBox(this);" onmouseout="closeBox(this);">
					box
				</div>
			</div>
		</div>
	</div>
	

<script type="text/javascript">
	function openBox(element){
		$(element).animate({width: '800'},500);
	}
	
	function closeBox(element){
		$(element).animate({width: '400'},500);
	}
</script>
		
</body>
</html>

Any idea how to solve this?

Thanks in advance?

oVTech · 02-14-2011, 03:05 PM

This works the same in all browsers. No lines appear when I test it in my machine - Windows Vista.

Tested it on IE7, IE8, Firefox, Chrome & Safari and it works fine - no lines.

elmu · 02-14-2011, 05:05 PM

Hmmm, it's interesting. I have attached a screenshot about the problem.
I use Windows 7 Home Premium 64 bit and IE8 64bit

oVTech · 02-15-2011, 04:04 AM

Yeah, I am not sure how to help you... I do not have a Windows 7 OS. It must be something with the OS itself, CSS or the animation function. If I were you I would get rid of all the CSS and Markup except the div that you're animating. I would also look at the animation function in more depth.

elmu · 02-15-2011, 08:59 AM

Thanks for the tips!
I Have checked a lot of combination and it seems that the 64bit version of IE8 has the problem both on Vista and Windows 7.

oVTech · 02-15-2011, 06:03 PM

Actually that particular problem does not appear on my 64bit Win Vista on IE8 or IE7. I have used a Windows 7 OS before for testing code, and most likely I tested some jQuery code too (including animation), and have never had any issues such as yours. The only thing I could think of, it would be hardware support (just a guess).

If I were you I would re-install IE8 just to see if it makes any difference and would try the animation code that you have in some friends' computers to see if the issue appears in those PCs (if the issue appears in other PCs, you might be the one that discovers a bug in the jQuery's animation function in Win 7 OSs [well the "bug" could be in the OS itself] ).

As soon as I get my hands on a Windows 7 OS, I will test the animation function again and will post back here.

You can ask the question at the jQuery forums too, the might already know about this.
http://forum.jquery.com/