嗨,我想一个接一个地举办这些事件。这意味着当第一个事件结束时,另一个事件发生。但不能这样做。第二张图片在第一个事件开始动画后出现请帮助我。我的代码是
<!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>
最佳答案
animate
函数有自己的回调函数。像这样使用它:
$("#pin01").animate({left: '650px'}, 500, function() {
$("#pin02").animate({left: '350px'});
});
500,是延迟,在第一个动画完成后,如果不想延迟可以设置为0。延迟以 ms
(毫秒)为单位给出。
关于javascript - 如何让效果一个接一个地发生,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30818436/