jQuery动效
一. jQuery显示和隐藏动画
-
show(): 显示
$('button').eq(0).click(function(){ $('div').show(1000,function(){ alert('显示动画完毕') }) })
格式:show(毫秒, fn) fn在动画执行完毕会执行
-
hide(): 隐藏
$('button').eq(1).click(function () { $('div').hide(1000, function () { alert('隐藏动画完毕') }) })
格式: hide(毫秒, fn) fn在动画执行完毕会执行
-
toggle(): 切换
$('button').eq(2).click(function () { $('div').toggle(1000, function () { alert('切换动画完毕') }) })
格式: toggle(毫秒, fn) fn在动画执行完毕会执行
二. jQuery展开和收起动画
-
slideDown(): 展开
$('button').eq(0).click(function(){ $('div').slideDown(1000, function(){ alert('展开完毕') }) })
-
slideUp(): 收起
$('button').eq(1).click(function () { $('div').slideUp(1000, function () { alert('收起完毕') }) })
-
slideToggle(): 切换展开收起
$('button').eq(2).click(function () { $('div').slideToggle(1000, function () { alert('切换完毕') }) })
三. jQuery淡入淡出动画
-
fadeIn方法: 淡入
$('button').eq(0).click(function(){ $('div').fadeIn(1000, function(){ alert('淡入完毕') }) })
-
fadeOut方法: 淡出
$('button').eq(1).click(function () { $('div').fadeOut(1000, function(){ alert('淡出完毕') }) })
-
fadeToggle方法: 切换
$('button').eq(2).click(function () { $('div').fadeToggle(1000, function(){ alert('切换完毕') }) })
-
fadeTo方法: 淡入到指定程度
$('button').eq(3).click(function () { $('div').fadeTo(1000, 0.2, function(){ alert('已淡入到指定程度') }) })
四. jQuery自定义动画
-
anmite()
方法: 设置自定义动画,可以传四个参数$('.one').animate({ marginLeft : 500 },5000,'linear',function(){ alert('自定义动画执行完毕') })
第一个参数: 接收一个对象,可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画速度,默认swing: 慢快慢 linear: 匀速运动
第四个参数: 动画执行完毕之后的回调函数
-
对象中可以传多个参数,会同时执行
$('.one').animate({ width : 500, height : 500 },1000)
-
如果想分开执行可以按以下写法
$('.one').animate({ width: 500 }, 1000).animate({ height: 500 }, 1000)
-
-
累加操作:在原有的属性上叠加
$('.two').animate({ width : '+=100' }, 1000, 'linear', function () { // alert('自定义动画执行完毕') })
-
关键字:可以设置值为关键字,如hide隐藏、toggle切换
$('.one').animate({ // width: "hide" width: "toggle" }, 1000, 'linear', function () { // alert('自定义动画执行完毕') })
五. jQuery的stop和delay方法
-
delay()方法: 设置延迟时长
$('.one').animate({ width: 500 }, 1000).delay(2000).animate({ height: 500 }, 1000)
先宽度变,过2秒后高度变
-
stop()方法的几种情况:
-
立即停止当前动画,继续执行后续的动画
$("div").stop(); $("div").stop(false); $("div").stop(false, false);
-
立即停止当前和后续所有的动画
$("div").stop(true); $("div").stop(true, false);
-
立即完成当前的,继续执行后续动画
$("div").stop(false, true);
-
立即完成当前的,并且停止后续所有的
$("div").stop(true, true);
-
六. off和interval
-
off: 打开或关闭全局动画。默认是false打开,当设为true时会关闭所有动画
jQuery.fx.off = true;
-
interval: 设置动画的显示帧数。默认是13. 这个值越大动画越卡,越小越流畅越站游览器性能
jQuery.fx.interval = 100;