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

标签 javascript jquery css html

嗨,我想一个接一个地举办这些事件。这意味着当第一个事件结束时,另一个事件发生。但不能这样做。第二张图片在第一个事件开始动画后出现请帮助我。我的代码是

<!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/

相关文章:

javascript - 如何在 meteor 1.4.1.1 中使用 intro.js 形式的 npm 包?

javascript - 使 Highcharts 边框颜色与柱形图上的背景颜色匹配

jquery - 来自 .load() 的响应文本未触发警报

javascript - 从样式中删除背景图像

css - PNG 图像在针对 Retina 缩放 50% 时看起来很奇怪

javascript - jQuery 属性选择器 - 我做错了什么吗?

javascript - 使用 JQuery 解析 JSON 数组

jQuery 使用 .on() 替代 .live()

javascript - 如果菜单打开则应用 css 规则

html - 垂直和水平对齐 Owl Carousel 箭头 slider 中的图像