www.webdeveloper.com
Results 1 to 12 of 12

Thread: jQuery animate marginTop jerky in IE

  1. #1
    Join Date
    Aug 2009
    Posts
    7

    jQuery animate marginTop jerky in IE

    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

    Code:
    <body>
      <div id="top"> 
         <div id="top1024">
           <div id="top_user">
             <p></p>
           </div>
         </div>
      </div>
    </body>
    2) CSS

    Code:
    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

    Code:
    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

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Why not absolutely position this div, and use top: -300px? I've always found IE to have a little bit of a problem with negative margins.

  3. #3
    Join Date
    Aug 2009
    Posts
    7
    I was trying to avoid absolute positioning as the need to do it in this case felt just unnatural, but if it does the job, I'll have to stick to it a guess..

    I will give it a try now and get back to you how was it.

  4. #4
    Join Date
    Aug 2009
    Posts
    7
    I've made a quick test right now. I set the position:absolute for the div & specified the top and left in css.

    What I've noticed, in this setup animating the actual top is quite bad, however when I animate marginTop now, the animation is much smoother, still far away from FF,Safari or Opera though.

    Any ideas?

  5. #5
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Perhaps it isn't the coding, but the caching set on the browser.

  6. #6
    Join Date
    Aug 2009
    Posts
    7
    Well, I do shift+refresh on a regular basis, that doesn't help on that one.

    Unless there is some option in the settings I should enable / disable?

  7. #7
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Don't know. Can you send a link to the page?

  8. #8
    Join Date
    Aug 2009
    Posts
    7
    It will take me probably another few months before I finish the app, then I'd love to post the link

    At the moment I am working locally, don't even have a dev server, etc. setup.

    What I can do is to post all the code from the template in question, all the css and all js, but I don't think it's that much of help?

  9. #9
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Ah - you're working locally? Once you upload to the server, that MIGHT fix the problem. At least, I've experienced that before.

  10. #10
    Join Date
    Aug 2009
    Posts
    7
    Hmm.. why would it work fine on the server and not locally then? The animation is still gonna be run locally on visitor's machine

    I mean, most of diffrences I had so far while going live would be win / unix issues (need to change paths, etc.)

  11. #11
    Join Date
    Aug 2009
    Posts
    7
    bump!

    Anyone any ideas?

  12. #12
    Join Date
    Jul 2008
    Location
    Charlottesville, VA
    Posts
    91
    My usual recipe for this kind of javascript problem is to make a test copy of the page and start stripping code. Remove a set of tags, refresh your browser. If the problem stops, you found the problem area. If it never stops, the problem is in your scripts. It's not superbly elegant, but it can help you isolate the problem to a specific element.

    Frank

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles