jQuery动画
2016-05-09 15:19
603 查看
一、显示隐藏
slow、normal 和 fast,
分别对应 600 毫秒、400 毫秒和 200 毫秒
三、淡入淡出
先看一个同步动画
obj 表示样式的对象
time 表示动画运动消耗的时间
callback 表示回调函数
第一种:依照顺序执行
连缀不能够实现顺序队列
因此JQ提供了.queue()来实现队列
是因为queue的特性导致的,只需要在queue传人next参数且在结尾加上next()方法即可
许多时候我们并不想让动画执行完毕,而是中途停止掉
.stop()方法接受两个布尔参数,默认为false,
分别表示是否清除未执行的动画队列和是否直接跳转到最后的动画状态
点击运动按钮,动画进行不停的运动,点击停止按钮,让正在运行的动画停止
1.$.fx.interval 设置动画每秒运行的帧数,默认13,越小越流畅,但会影响性能
<input type="button" id="show" value="显示"/> <input type="button" id="hide" va</dlue="隐藏"/> <div style="background:red;width:200px;height:200px;" id="box"></div> $("#show").click(function () { $("#box").show(); }); $("#hide").click(function () { $("#box").hide(); });可以设置匀速运动时间
$("#show").click(function () { $("#box").show(1000); }); $("#hide").click(function () { $("#box").hide(1000); });jQuery 还提供了三种预设速度参数字符串:
slow、normal 和 fast,
分别对应 600 毫秒、400 毫秒和 200 毫秒
$("#show").click(function () { $("#box").show("fast"); }); $("#hide").click(function () { $("#box").hide("slow"); });可以在show()和hide()的基础上,实现动画队列的效果
$("#show").click(function () { $("#box").show("fast", function () { console.log("show"); }); }); $("#hide").click(function () { $("#box").hide("slow", function () { console.log("hide"); }); });实现动画的切换 用toggle
$(document).click(function () { $("#box").toggle("slow"); });二、卷动
<input type="button" id="up" value="Up"/> <input type="button" id="down" value="Down"/> <input type="button" id="toggle" value="Toggle"/> <div style="background:red;width:200px;height:200px;" id="box"></div> $("#up").click(function () { $("#box").slideUp("slow"); }); $("#down").click(function () { $("#box").slideDown("slow"); }); $("#toggle").click(function () { $("#box").slideToggle("slow"); });注意 : 用法和hide()、show()一样
三、淡入淡出
<input type="button" id="in" value="淡入"/> <input type="button" id="out" value="淡出"/> <input type="button" id="toggle" value="切换"/> <div style="background:red;width:200px;height:200px;" id="box"></div> $("#in").click(function () { $("#box").fadeIn("slow"); }); $("#out").click(function () { $("#box").fadeOut("slow"); }); $("#toggle").click(function () { $("#box").fadeToggle("slow"); });注意:淡入淡出从0~100,如果想固定到某个值,只能用fadeTo()
$(document).click(function () { $("#box").fadeTo(1000, 0.3); });四、自定义动画
先看一个同步动画
$("#box").click(function () { $(this).animate({ "width" : "600px", "height" : "400px", "fontSize" : "200px", "opacity" : "0.2" }); });animate(obj, time, callback)方法
obj 表示样式的对象
time 表示动画运动消耗的时间
callback 表示回调函数
$("#box").click(function () { $(this).animate({ "width" : "600px", "height" : "400px", "fontSize" : "200px", "opacity" : "0.2" }, 200, function () { console.log("动画执行完毕"); // 动画执行完毕 }); });接下来,让div运动起来
<input type="button" value="运动"/> <div style="position:absolute;background:red;width:100px;height:100px;" id="box"></div> $("input").click(function () { $("#box").animate({ "left" : "+=100px" }); })动画队列有两种实现方法
第一种:依照顺序执行
$("input").click(function () { $("#box").animate({ "left" : "+=1000px" }); $("#box").animate({ "left" : "-=1000px" }); });第二种:通过连缀的形式
$("input").click(function () { $("#box").animate({ "left" : "500px" }, 1000).animate({ "top" : "500px" }, 1000).animate({ "left" : "0px" }, 1000).animate({ "top" : "0px" }, 1000); });第三种:通过回调函数
$("input").click(function () { $("#box").animate({ "left" : "500px" }, 1000, function() { $("#box").animate({ "top" : "500px" }, 1000, function () { $("#box").animate({ "left" : "10px" }, 1000, function () { $("#box").animate({ "top" : "30px" }, 1000, function () { alert("动画执行完毕"); }); }); }); }); });五、列队动画方法
连缀不能够实现顺序队列
$("input").click(function () { $("#box").slideUp(1000).slideDown(1000).css("background", "orange"); });这时,需要强行将css放在slideDown后面,使用回调函数来解决问题
$("input").click(function () { $("#box").slideUp(1000).slideDown(1000, function () { $(this).css("background", "orange"); }); });但是,由于回调函数可读性差,一旦数量增加,就不友好了。
因此JQ提供了.queue()来实现队列
$("input").click(function () { $("#box").slideUp(1000).slideDown(1000).queue(function () { $(this).css("background", "orange"); }); });现在再加一个动画
$("input").click(function () { $("#box").slideUp(1000).slideDown(1000).queue(function () { $(this).css("background", "orange"); }).fadeOut(); });这时,发现报错了!为什么呢?
是因为queue的特性导致的,只需要在queue传人next参数且在结尾加上next()方法即可
$("input").click(function () { $("#box").slideUp(1000).slideDown(1000).queue(function (next) { $(this).css("background", "orange"); next(); }).fadeOut("slow"); });queue()动画队列还有一个作用,就是计算队列的长度,不过用的很少
function count () { return $("#box").queue("fx").length; } // 调用 $("#box").slideDown("slow", function () { alert(count()); // 1 });清除队列
$("#box").slideUp(1000).slideDown(1000).queue(function (next) { $(this).css("background", "orange"); next(); }).fadeOut("slow", function () { $(this).clearQueue(); // 清除了队列动画,后面的动画就不再执行了 }).fadeIn("slow");六、动画相关的方法
许多时候我们并不想让动画执行完毕,而是中途停止掉
.stop()方法接受两个布尔参数,默认为false,
分别表示是否清除未执行的动画队列和是否直接跳转到最后的动画状态
<input type="button" value="运动"/>有时候,需要让动画延迟几秒之后,再运动
<input type="button" value="停止" class="stop"/>
<div style="position:absolute;background:red;width:100px;height:100px;" id="box"></div>
$("input").click(function () { $("#box").animate({ "left" : "500px" }, 1000).animate({ "top" : "500px" }, 1000).animate({ "left" : "0px" }, 1000).animate({ "top" : "0px" }, 1000); });
$(".stop").click(function () {
$("#box").stop(true, false);
});
$("input").click(function () { $("#box").delay(3000).animate({ "left" : "+=500px" }); });最后,要做这样一个效果
点击运动按钮,动画进行不停的运动,点击停止按钮,让正在运行的动画停止
<input type="button" value="运动" class="start"/> <input type="button" value="停止" class="stop"/> <div style="position:absolute;background:red;width:100px;height:100px;" id="box"></div> $(".start").click(function () { $("#box").slideToggle("slow", function () { $(this).slideToggle("slow", arguments.callee); }); }); $(".stop").click(function () { $("div:animated").stop().css("background", "blue"); });七、动画全局属性
1.$.fx.interval 设置动画每秒运行的帧数,默认13,越小越流畅,但会影响性能
$.fx.interval = 1000; $(".start").click(function () { $("#box").slideToggle("slow", function () { $(this).slideToggle("slow", arguments.callee); }); });2.$.fx.off 关闭所有的动画效果,默认为false
$(".start").click(function () { $("#box").slideToggle("slow", function () { $(this).slideToggle("slow", arguments.callee); }); }); $(".stop").click(function () { $.fx.off = true; });3.animate()中的第三个参数,easing表示运动方式,swing(缓冲),linear(匀速),默认为swing
$(".start").click(function () { $("#box").animate({ "left" : "+=500px" }, "slow", "swing"); }); $(".stop").click(function () { $("#box").animate({ "left" : "-=500px" }, "slow", "linear"); });
相关文章推荐
- JQuery--使用JQuery 的$.ajax 方法进行异步请求,导致页面闪烁
- JqueryUI学习笔记-自动完成autocomplete
- jQuery+CSS实现一个侧滑导航菜单代码
- jQuery中.bind() .live() .delegate() .on()的区别
- jquery和js进行添加样式
- jQuery实现点击按钮文字变成input框点击保存变成文字
- jQuery代码实现表格中点击相应行变色功能
- 通过ASP.NET Web API + JQuery创建一个简单的Web应用
- jQuery动画
- jQuery表单选择器
- jquery使用canvas的问题
- jquery实现表格中点击相应行变色功能
- jquery 10分钟 倒计时
- Jquery 自适应宽度的input
- js和jquery中的触发事件
- jQuery学习笔记(二)选择器
- jQuery中的supersized的插件的功能描述
- 随笔:用心良苦 - 理解 jQuery 的构造函数
- opacity+visibility+transition组合代替jquery 的fadeIn ,fadeOut
- jquery tmpl 详解