Question

嗨，我想一个接一个地做这些事件。这意味着当第一个事件结束时发生另一个事件但无法这样做。第一个事件开始动画后第二个图像出现请帮助我。我的代码是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>‌
<script>
$(document).ready(function(){
$("#pin01").animate({left: '650px'});

$("#pin01").promise().done(function(x){
$("#pin02").animate({left: '350px'});
});
});
</script>
</head>
<body>

<img src="mission.gif" id="pin01" style=" position:absolute;top:300px;left:300px;transition:5s"/>
<img src="mission.gif" id="pin02" style=" position:absolute;top:300px;left:900px;transition:5s"/>
</body>
</html>

Answer 1

animate函数有自己的回调函数。像这样使用它：

$("#pin01").animate({left: '650px'}, 500, function() {
    $("#pin02").animate({left: '350px'});
});

500，是延迟，在第一个动画完成后，如果你不想要任何延迟，你可以将它设置为0。延迟以ms（毫秒）给出。

如何让效果一个接一个地发生

1 个答案: