一、动画隐藏和显示
(1)show(),四种用法
1、show(),
2、show(1000),加时间参数,ms单位
3、show(speed,function()),后面加回调函数,动画执行完再调用
speed:是显示速度,可以为 数字(毫秒),或者 normal,fast,slow
4、show(speed)
speed:是显示速度,可以为 数字(毫秒),或者 normal,fast,slow
(2)hide()同上
(3)滑入滑出 同上
滑入
$(selector).slideDown(speed,callback);
滑出
$(selector).slideToggle(speed,callback);
滑入滑出切换动画效果
$(selector).slideToggle(speed,callback);
(4)淡入淡出 同上淡入
$(selector).fadeIn(speed, callback);
淡出$(selector).fadeOut(1000);
淡入淡出切换动画效果
作用:通过改变透明度,切换匹配元素的显示或隐藏状态
$(selector).fadeToggle('fast',function(){});
改变透明度到某个值
与淡入淡出的区别:淡入淡出只能控制元素的不透明度从完全不透明到完全透明;而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的!
作用:调节匹配元素的不透明度
// 用法有别于其他动画效果
// 第一个参数表示:时长
// 第二个参数表示:不透明度值,取值范围:0-1
$(selector).fadeTo(1000, .5); // 0全透,1全不透
// 第一个参数为0,此时作用相当于:.css(“opacity”, .5);
$(selector).fadeTo(0, .5);
(5)自定义动画 animate()
// 第一个参数表示:要执行动画的CSS属性(必选)可以是Jason
// 第二个参数表示:执行动画时长(可选)
// 第三个参数表示:动画执行完后立即执行的回调函数(可选)
$(selector).animate({params},speed,callback);
(6)停止动画stop()停止当前正在执行的动画
// 第一个参数表示后续动画是否要执行
(true:后续动画不执行 ;false:后续动画会执行)
// 第二个参数表示当前动画是否执行完
(true:立即执行完成当前动画 ;false:立即停止当前动画)
$(selector).stop(clearQueue,jumpToEnd);都不给,默认false;
二、下拉菜单案例
方法一:
var jqli=$(".wrap>ul>li");
jqli.mouseenter(function(){
$(this).children('ul').slideDown(1000);//this是原生js
})
jqli.mouseleave(function(){
$(this).children('ul').slideUp(1000);
这样重复多次移动鼠标,下拉菜单会停不下来..
方法二(正确):
var jqli=$(".wrap>ul>li");
jqli.mouseenter(function(){
$(this).children('ul').stop().slideDown(1000);//this是原生js
})
jqli.mouseleave(function(){
$(this).children('ul').stop().slideUp(1000);
每次从一级菜单移开后,触动mouseleave,先执行stop,把mouseenter的动画停止不继续执行,然后slideUp(1000)。如果没有slideUp完,鼠标再次放到一级菜单上,会先经过stop()停止当前动画,由于display已经是block,则就会停在当前位置,移开就会滑出。因为每次都经过一个stop(),并不会像方法一一样多次移动鼠标二级菜单停不下来。