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
--
View this message in context:
http://www.nabble.com/jQuery-animate-marginTop-jerky-in-IE-tp24863683s27240p24863683.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
