Animate absolute object from right: 0 to left: 0 in Chrome

StackOverflow https://stackoverflow.com/questions/21882622

Question

So I have a jQuery function that animates a set of -elements with different width from aligning to the right of the parent div, to the left of the parent div. This works smothly in firefox, however in Chrome the animation "jumps" instead of animating smothly to the otherside. Has anyone an idea of a fix for this?

fiddle: http://jsfiddle.net/WM9nQ/

HTML:

     <body> 
      <div id="parent">
       <ul>
         <li><a href="#">link1</a></li>
         <li><a href="#">link2</a></li>
         <li><a href="#">link3</a></li>
         <li><a href="#">link4</a></li>
         <li><a href="#">link5</a></li>
       </ul>
     </div>
</body>

CSS:

body{
width: 500px;  
}

#parent{
position: relative;
width: 100%;
}

#parent ul li{
height: 20px;
width: 100%;
margin: 2px 0px;
list-style: none;
}

#parent a{
    color: #000;
position: absolute;
right: 0;
}

JS:

 $(document).ready(function($){
   $('#parent a').bind('click', function(e) {
            e.preventDefault();
                $('#parent a').animate({
                    left: 0
                    }, 2000);       
                });
});
Was it helpful?

Solution

The reason it instantly goes to the left is because you have not set the left position of the element, as a result jQuery tries to go from the computed left:auto to left:0

To get around this you could set the left position before performing the animation:

var element = $('#parent li a:eq(0)');

var left = element.position().left;

element.css({ left: left });

element.delay(100).animate({
    left: "0px"
}, 'slow');

http://jsfiddle.net/KQGQr/2/

Or you could animate using the right position of the element:

$('#parent a').bind('click', function(e) {
    e.preventDefault();
    var element = $('#parent li a:eq(0)');

    element.delay(100).animate({
        right: $('#parent').width() - element.outerWidth()
    }, 'slow');       
});

http://jsfiddle.net/KQGQr/3/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top