jquery - jQuery animate() 中 CSS 属性的不同持续时间

Question

我正在使用 jQuery 为页面上的 DOM 元素添加动画效果，但在使用其原生 animate() 时遇到了障碍。

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

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

它工作得很好，但我需要在 1000ms 内设置位置动画，并在 300ms 内设置不透明度 .

我发现我不能这样写:

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


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

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

我尝试使用第二个参数表示法(基于 http://api.jquery.com/animate )并使用 queue: false 但它不起作用。不得不说我理解的不是很透彻，欢迎指正。

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

Answer 1

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

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

编辑:测试成功:)