2 Replies - 4640 Views - Last Post: 08 August 2009 - 02:52 AM

#1 touch_the_sky  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 07-August 09

Jquery animate marginTop jerky in IE

Posted 07 August 2009 - 05:20 AM

Hi everyone!

I have an issue with IE which has been driving me absolutely mad for like last 2 days. Basically all works awesome, crossbrowser, etc. apart from one floated div, when I am trying to animate it's margin-top on hover (move it down, when mouse go out - move it back up). All browsers perform the animation as a charm - slick, smooth, fast and cool looking, but IE has to be different, hasn't it?

Anyways, I will copy and paste the markup, css & script related to the issue. It's not all the template, to make it shorter I cut only the bits relating to #top_user div. I am using jQuery 1.3.2, XHTML1.0 strict (validates) and the background image is a transparent png32 if that helps. The easing plugin I added just recently hoping it's gonna prevent the jerkiness in IE (it didn't) - so with or without it - it's crap in IE and great in anything else

1) Markup

<body>
  <div id="top"> 
	 <div id="top1024">
	   <div id="top_user">
		 <p></p>
	   </div>
	 </div>
  </div>
</body>



2) CSS

body
{
width: 100%;
height: 100%;
background-color:#E4E4E4;
margin: 0px;
padding: 0px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#333;
}

#top
{
height:248px;
width:100%;
background-image: url(/images/layout/top/top_background.png);
background-repeat: repeat-x;
}

#top1024
{
height:100%;
width:1024px;
float:left;
}

#top_user
{
width:514px;
height:222px;
background-image: url(/images/layout/top/user_cp.png);
background-repeat: no-repeat;
float:right;
margin-top:-372px;
padding:0px;
/* The black bit appears as 35px height while hidden */
}

#top_user p
{
color:#FFF;
margin-top: 195px;
text-indent: 40px;
}



3) Script

jQuery("#top_user").hover(function() {
jQuery(this).animate({marginTop: '-300px'}, {duration: 300, easing: 'easeOutBounce'});
},
function() {
jQuery(this).stop().animate({marginTop: '-372px'}, {duration: 300, easing: 'easeOutBounce'});	
});



Any help is well appreciated as my frustration levels are unbelievable right now;)

Cheers

TouchTheSky

Is This A Good Question/Topic? 0
  • +

Replies To: Jquery animate marginTop jerky in IE

#2 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Jquery animate marginTop jerky in IE

Posted 07 August 2009 - 01:51 PM

I think it seriously is just that it's IE. I scowered the net for you man and couldn't find anything pertaining to this problem, well a solution anyways.

On a side note, man you get around - webdevelopers.com, google groups, and a few other forums all with the same post.

Welcome to DIC.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#3 touch_the_sky  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 07-August 09

Re: Jquery animate marginTop jerky in IE

Posted 08 August 2009 - 02:52 AM

Thanks for trying, I thought it's the bloody IE, not me;)

I guess I'll have to figure out some alternative displayed for IE users or keep it jerky

TouchTheSky
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1