从右侧动画绝对对象：0 到左侧：Chrome 中的 0答案

【问题标题】：Animate absolute object from right: 0 to left: 0 in Chrome从右侧动画绝对对象：0 到左侧：Chrome 中的 0
【发布时间】：2014-02-19 22:51:55
【问题描述】：

所以我有一个 jQuery 函数，它为一组具有不同宽度的元素设置动画，从对齐到父 div 的右侧，到父 div 的左侧。这在 Firefox 中运行良好，但在 Chrome 中，动画“跳跃”而不是平滑地动画到另一边。有没有人知道如何解决这个问题？

小提琴：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);       
                });
});

【问题讨论】：

你能把所有这些代码放在jsfiddle中吗？
你能创建一个 js fiddle 吗？
jsfiddle.net/WM9nQ

标签： javascript jquery jquery-animate absolute

【解决方案1】：

它立即向左移动的原因是因为您没有设置元素的左侧位置，结果jQuery试图从计算的left:auto转到left:0

要解决这个问题，您可以在执行动画之前设置左侧位置：

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/

或者您可以使用元素的正确位置进行动画处理：

$('#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/

【讨论】：

这很好用，唯一的问题是它在执行动画之前会向右“跳”一下。
更好，因为它是一排“右：0”定位的对象，它们仍然会在动画之前小跳到“左：对齐”。更好，但并不完美……嗯……
我看不到跳跃，所以不确定这是否有效，但尝试新的更新
啊，这是因为所有 a-tags 的宽度都相等。看看新的小提琴。 jsfiddle.net/KQGQr/4 现在动画以 -elemnts 右对齐结束，我的愿望是它们将从右对齐的两个左对齐动画:)
就是这样！非常感谢^_^