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

一、动画隐藏和显示

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