Web编程前端之6:如何使jQuery动画效果与程序顺序执行
2012-09-12 21:33
525 查看
在利用jQuery框架去处理一些简单的动画时,可能会遇到一些小问题
例如:
$("#pic").attr("src","0.jpg");
$("#pic").fadeOut("slow");
$("#pic").attr("src","1.jpg");
$("#pic").fadeIn("slow");
我们希望得到的结果是:
1 #pic 载入 0.jpg;
2 #pic 淡出;
3 #pic 载入 1.jpg;
4 #pic 淡入;
实现一个简单的图片切换,但是实际上运行的结果是
1.jpg 进行了 fadeOut,fadeIn
原因是 $("#pic").attr("src","1.jpg"); 是一个瞬间完成的动作
而fadeOut,fadeIn是持续的动作。我们看到 fadeOut动作的时候,实际上
程序已经执行完了,#pic已经替换成 1.jpg,所以会是 1.jpg连续执行了
fadeOut,fadeIn。
如何解决这个问题?其实方法也很简单,只需要把上述程序改为:
$("#pic").attr("src","0.jpg");
$("#pic").fadeOut("slow",function(){
$("#pic").attr("src","1.jpg");
}).fadeIn("slow");
利用 fadeOut的 callback函数,在fadeOut执行后
替换 1.jpg,然后再执行 fadeIn()就可以了。
通过这个方法我们可以解决类似的一些动画之间程序顺序执行问题。
例如:
$("#pic").attr("src","0.jpg");
$("#pic").fadeOut("slow");
$("#pic").attr("src","1.jpg");
$("#pic").fadeIn("slow");
我们希望得到的结果是:
1 #pic 载入 0.jpg;
2 #pic 淡出;
3 #pic 载入 1.jpg;
4 #pic 淡入;
实现一个简单的图片切换,但是实际上运行的结果是
1.jpg 进行了 fadeOut,fadeIn
原因是 $("#pic").attr("src","1.jpg"); 是一个瞬间完成的动作
而fadeOut,fadeIn是持续的动作。我们看到 fadeOut动作的时候,实际上
程序已经执行完了,#pic已经替换成 1.jpg,所以会是 1.jpg连续执行了
fadeOut,fadeIn。
如何解决这个问题?其实方法也很简单,只需要把上述程序改为:
$("#pic").attr("src","0.jpg");
$("#pic").fadeOut("slow",function(){
$("#pic").attr("src","1.jpg");
}).fadeIn("slow");
利用 fadeOut的 callback函数,在fadeOut执行后
替换 1.jpg,然后再执行 fadeIn()就可以了。
通过这个方法我们可以解决类似的一些动画之间程序顺序执行问题。
相关文章推荐
- jquery中的ajax如何返回结果而非回调方式即为同顺序执行
- 3.29 学前端 jquery之操作元素之动画效果
- [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号,在Asp.net 获取不到的,解决办法 .Net程序员 初学Ubuntu ,配置Nignix 夜深了,写了个JQuery的省市区三级级联效果
- 8款基于Jquery的WEB前端动画特效
- jquery中ajax函数执行顺序问题之如何设置同步
- 基于jQuery实现多标签页切换的效果(web前端开发)
- 如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
- Jquery动画执行顺序测试
- 如何确保JavaScript的执行顺序 之jQuery.html深度分析
- 如何利用jquery.cookie.js让某个jquery效果只执行一次
- java编程思想static之程序执行顺序
- 从零开始学 Web 之 jQuery(三)元素操作,链式编程,动画方法
- web前端之JavaScript DOM编程艺术之用JavaScript实现动画效果拓展(预览图片)
- [jQuery编程挑战]001:实现页面元素加速动画效果
- WEB程序如何执行定时任务。(转)
- [原创]如何确保JavaScript的执行顺序 – 之jQuery.html深度分析
- javascript原生移动云编程6 - 如何做动画效果
- 关于Jquery中的链式编程和动画效果(注意事项)
- 如何确保JavaScript的执行顺序 之jQuery.html深度分析