我正在使用 jQuery 为页面上的 DOM 元素添加动画效果,但在使用其原生 animate()
时遇到了障碍。
我正在尝试将元素移至右侧并更改其不透明度。
$element.animate({
'left': '50%',
'opacity': '1.0'
}, 1000);
它工作得很好,但我需要在 1000
ms 内设置位置动画,并在 300
ms 内设置不透明度 .
我发现我不能这样写:
$element.animate({
'left': '50%'
}, 1000);
$element.animate({
'opacity': '1.0'
}, 300);
这将导致动画排队,因为它是相同的元素,并且 jQuery 显然需要等待第一个动画完成。或者我在这里做错了什么。
我尝试使用第二个参数表示法(基于 http://api.jquery.com/animate )并使用 queue: false
但它不起作用。不得不说我理解的不是很透彻,欢迎指正。
所以我的问题是 - 如何独立更改这些 CSS 属性的持续时间间隔?
最佳答案
我认为您在尝试使用队列
时走在正确的轨道上。这是一个如何工作的示例,我希望它有所帮助:
$('#element').animate({ left:'50%' }, { queue: false, duration: 1000 })
.animate({ opacity : '1.0' }, { queue : false, duration: 300 });
编辑:测试成功:)
关于jquery - jQuery animate() 中 CSS 属性的不同持续时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2351681/