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

Question

我使用jQuery来为页面上的DOM元素设置动画效果，并在使用其本地animate()时遇到障碍。

我试图将我的元素移动到右侧并更改其不透明度。

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

它工作得很好，但我需要在动画MS 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的位置变化，然后动态化剩余的位置变化700ms？