jQuery animate（）中CSS属性的不同持续时间

Question

我正在使用jQuery在页面上设置DOM元素的动画，并在使用原生animate()时遇到障碍。

我正在尝试将元素移到右侧并改变其不透明度。

$element.animate({
    'left': '50%',
    'opacity': '1.0'
}, 1000);

效果非常好，但我需要在1000 ms内动态位置，在300毫秒内动画不透明度。

我发现我不能这样写：

$element.animate({
    'left': '50%'
}, 1000);


$element.animate({
    'opacity': '1.0'
}, 300);

这将导致排队动画，因为它是相同的元素，jQuery显然需要等待第一个动画完成。或者我在这里做错了。

我尝试使用第二个参数表示法（基于http://api.jquery.com/animate）并使用queue: false，但它不起作用。我必须说我不完全理解，所以任何更正都是受欢迎的。

所以我的问题是 - 如何独立更改这些CSS属性的持续时间间隔？

Answer 1

我认为您在尝试使用queue时走在正确的轨道上。这是一个如何工作的例子，我希望它有所帮助：

$('#element').animate({ left:'50%' }, { queue: false, duration: 1000 })
             .animate({ opacity : '1.0' }, { queue : false, duration: 300 });

编辑：已成功测试:)

Answer 2

你能在一次通话中动画300毫秒吗？高达3/10的位置变化，然后将位置变化的剩余部分动画另外700毫秒？