Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts

    jQuery animation problem

    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?
    Last edited by elmu; 02-14-2011 at 03:49 PM.

  • #2
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    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.
    Last edited by oVTech; 02-14-2011 at 04:08 PM.




    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-




  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hmmm, it's interesting. I have attached a screenshot about the problem.
    I use Windows 7 Home Premium 64 bit and IE8 64bit
    Attached Thumbnails Attached Thumbnails jQuery animation problem-garbagelines.png  

  • #4
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    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.




    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-




  • Users who have thanked oVTech for this post:

    elmu (02-15-2011)

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    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/
    Last edited by oVTech; 02-15-2011 at 08:17 PM.




    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-





  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •