Question

Having some problems with a piece of Jquery code, well that’s where I think the problem is – On FF when the page loads after 2 seconds it animates panels from the left of the screen to the right. It looks fine without any issues but in Chrome and IE it jumps back and continues moving across.

Here is the code –

<script type="text/javascript" language="javascript">

$(function() {

   // Display div slowly
    $('#one').delay(2000).show('slow');
    $("#one").animate({
        left: '+=159'
    }, 3000);


    $('#two').delay(3000).show('slow');
    $("#two").animate({
        left: '+=159'
    }, 3000);

    $('#three').delay(4000).show('slow');
    $("#three").animate({
        left: '+=159'
    }, 3000);

    $('#four').delay(5000).show('slow');
    $("#four").animate({
        left: '+=159'
    }, 3000);
    });

 </script>

Here is a preview of the page – http://www.visrez.com/preview/och-group/

P.S I’m not ruling out it’s a css issue…

Thanks in advance for any help!

Gearóid

Answer 1

The problem stems from the fact that Chrome isn’t taking into account the position (relative to the offset parent) that div has on the page before you start moving it. So, once animated, it has a value of left: 159px which is relative to the body. Firefox is taking the original position into account and ends with left: 256px.

I haven’t looked into why this happens yet but here are a few things that you could do (workarounds):

1. Before animating figure out the position relative to the offset parent and set the CSS top and left attributes. Then, hopefully, the final value will be the value that you set plus 159px. Something like:

   var offset = $("#one").offset();
   $("#one").css({"top": offset.top, "left": offset.left});
   // animate
   

2. Wrap #oneTop and #one and each other pair in a div that is position: relative. This will set the offset parent of the animated div to the position: relative div. This way the +159px is relative to where the div would be in the document.