如何使项目在开始另一个过渡之前完成一个过渡

How do you make an item complete one transition before starting another?

本文关键字:一个 项目 何使 开始 另一个      更新时间:2023-09-26

我试图让我的程序首先转换一个项目,然后在代码的JavaScript部分。

arrow.style.top = "0px";
arrow.style.left = guess * 9 + "px";

我尝试设置延迟,但无论我将代码行放在哪里,该项目都会停止,然后无论如何都会执行这两项操作。有没有办法让它等待一个过渡完成,然后开始第二个过渡,或者至少让第二个过渡在开始之前等待一定的时间?

提前谢谢你。

您可以使用

jquery回调函数。将第二个animate函数作为参数(回调)传递给第一个animate函数。第二个函数将在第一个函数完成时自动调用。 您可以通过这种方式链接多个动画。

查看此演示(点击红色方块);

这是小提琴: http://jsfiddle.net/yxzkL6vy/

$('div').click(function(){
    $(this).animate({"left":"100px"},300,function(){
         $(this).animate({"top":"100px"},300);
    })
});
div{
   position:absolute;
   left:0px;
    top:0px;
    width:100px;
    height:100px;
    background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>