2017/6/12学习心得 jq动画

时间:2021-05-17 16:28:25

一、动画隐藏和显示

(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(),并不会像方法一一样多次移动鼠标二级菜单停不下来。