gpt4 book ai didi

javascript - 为什么这会将元素移动 4 次?

转载 作者:行者123 更新时间:2023-11-29 20:26:13 26 4
gpt4 key购买 nike

为什么这行不通?我想要达到的效果是方 block 从左向右移动,并开始“插入”下一个方 block 。嵌套回调在外部元素上执行动画似乎是一个问题。

谁能解释一下?它有点管用,但一切都移动了太多次。

<html>
<head>
<style>
.item { width: 49px; height: 49px; border: 1px solid orange; background-color: #ccccff; }
#i0 { position: absolute; left: 0px; }
#i1 { position: absolute; left: 150px; }
#i2 { position: absolute; left: 200px; }
#i3 { position: absolute; left: 250px; }
#i4 { position: absolute; left: 400px; }
#i5 { position: absolute; left: 450px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
jQuery(function() {
$("#i0").animate({left:"+=100"}, function() {
$("#i0,#i1,#i2,#i3").animate({left:"+=100"}, function() {
$("#i0,#i1,#i2,#i3,#i4,#i5").animate({left:"+=50"});
});
});
});
</script>
</head>
<body>
<div id="i0" class="item"></div>
<div id="i1" class="item"></div>
<div id="i2" class="item"></div>
<div id="i3" class="item"></div>
<div id="i4" class="item"></div>
<div id="i5" class="item"></div>
</body>
</html>

最佳答案

animate() 的第二个参数是在动画完成时调用的回调。因为 $("#i0,#i1,#i2,#i3").animate(..) 动画了 4 个东西,它调用了它的回调 4 次。像这样的方法可能有效:

function move(i, left, callback) {
$("#i"+i).animate({left:left}, callback);
}

function sequence(n, left, callback) {
return function() {
var i = 0;
for (; i < n; i++) {
move(i, left);
}
move(i, left, callback);
}
}

jQuery(function() { move(0, "+=100", sequence(3, "+=100", sequence(5, "+=100"))) });

关于javascript - 为什么这会将元素移动 4 次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/667113/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com