jquery动画

2024-04-27 15:08:45

字体：大中小

来源：转载

供稿：网友

显示与隐藏

显示：

//显示用法一：show(); 无参数//效果：立即显示$("div").show();//显示用法二：show(毫秒值);（底层是由display控制）//效果：控制宽、高、透明度由小变大$("div").show(2000);//显示用法三：hide(字符串);// slow慢：600ms normal正常:400ms fast快：200ms//效果：同用法二$("div").hide("slow");$("div").hide("fast");$("div").hide("normal");//显示用法四：show(毫秒值，回调函数[显示完毕执行什么]);//效果：前面同法二，执行完动画后执行回调函数$("div").show(5000,function () { alert("动画执行完毕！");});

隐藏：

jq对象.hide();

用法同show()有四种，效果分别与之对应的show方法相反

滑入、滑出、滑动切换

滑入：同show方法一样有四种方法且参数一致，通过控制宽度或者高度来实现效果，滑入的方向与定位有关，默认向下滑入

//方法一：slideDown();//效果：匀速向下滑$("div").slideDown();//方法二：slideDown(毫秒值);//效果：缓动向下滑$("div").slideDown(2000);//方法三、四略

滑出：

jq对象.slideUp();

同滑入

滑入、滑动切换

//slideToggle() 用法同上//效果：如果是滑入就滑出，反之一样$("div").slideToggle(1000);

淡入、淡出、淡入淡出切换、改变透明度

淡入：用法同上，通过控制opacity达到效果

//方法一：slidefadeIn();//效果：透明度匀速增加$("div").fadeIn();//方法二：fadeIn(毫秒值);//效果：透明度缓动向下滑$("div").fadeIn(2000);//方法三、四略

淡出：

jq对象.fadeOut();

淡入淡出切换：

fadeToggle();

效果同滑入滑出切换

自定义动画

$(selector).animate(params,[speed],[easing],[fn]) 参数: params:动画目标值，json格式 speed:动画速度 easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”. fn:在动画完成时执行的函数，每个元素执行一次

$("div").animate({"top":100,"left":100},1000, function () { $("div").animate({"top":50,"left":50},1000, function () { alert("动画执行完毕！"); });});