Javascript 在Chrome中从右：0到左：0设置绝对对象的动画

因此，我有一个jQuery函数，它可以设置一组-元素的动画，这些元素的宽度不同于对齐到父div的右侧和父div的左侧。 这在firefox中非常有效，但是在Chrome中，动画“跳跃”，而不是在另一端非常有效地进行动画制作。有人有办法解决这个问题吗

小提琴：

HTML:

JS:

---

它立即向左移动的原因是您没有设置元素的左位置，因此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');  

也可以使用元素的正确位置设置动画：

$('#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');       
});

---

你能把所有这些代码放在JSFIDLE中吗？你能创建一个js FIDLE吗？这工作很好，唯一的一点是它在执行动画之前向右侧进行一个小的“跳跃”。更好的是，因为它是一行“右：0”定位的对象，所以它们在动画之前仍然会向“左：对齐”进行小的跳跃。更好，但不完美。。。嗯…我真的看不到跳转，所以不确定这是否有效，但试试新的更新。这是因为所有的a标签都有相同的宽度。看看新提琴。现在动画以-元素右对齐结束，我的愿望是它们将从右对齐拖到左对齐：）就是这样！非常感谢^_^

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

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

var left = element.position().left;

element.css({ left: left });

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

$('#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');       
});