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

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

문제

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);       
                });
});
도움이 되었습니까?

해결책

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/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top