考虑拥有以下对象:
<div id="d1"><span>This is div1</span></div>
<div id="d2"><span>This is div2</span></div>
<div id="d3"><span>This is div3</span></div>
<div id="d4"><span>This is div4</span></div>
<div id="clickhere"><span>Start animation</span></div>
考虑一下我想使用 jQuery 对前面列出的四个元素中的每一个元素应用一个动画。
我现在拥有的
如果页面如下,请考虑在 head 部分应用以下代码:
function start_anim() {
$("#d1").animate({top:"-50px"},1000,function(){}); // Animating div1
$("#d2").animate({top:"-50px"},1000,function(){}); // Animating div2
$("#d3").animate({top:"-50px"},1000,function(){}); // Animating div3
$("#d4").animate({top:"-50px"},1000,function(){}); // Animating div4
}
$(document).ready($('#clickhere').click(start_anim));
当事件发生时,该脚本片段将导致四个 div 同步翻译click
被解雇了。
我想要什么
不过,我想让第一个 div 首先移动,然后当第一个 div 的动画达到 50% 时,我想让第二个 div 移动。第三个和最后一个 div 也是如此。
我怎样才能达到这个目标?谢谢