jQuery（下）

1. jQuery 效果

jQuery给我们封装了很多动画效果，常见如下：

显示隐藏：1.show() 2.hide() 3.toggle()

滑动： 1.slideDown() 2.slideUp() 3.slideToggle()

淡入淡出：1.fadeIn() 2.fadeOut() 3.fadeToggle() 4.fadeTo()

自定义动画：animate()

1. 显示隐藏效果

显示和隐藏语法规范

show([speed,[easing],[fn]]);//显示
hide([speed,[easing],[fn]]);//隐藏
toggle([speed,[easing],[fn]]);//切换，显示时候点一下隐藏，隐藏时候点一下显示

显示参数（三个都一样）

• 参数都可以省略，无动画效果直接显示/隐藏

• speed：三种速度字符串（'slow','normal',fast）或者表示动画时长的毫秒数值（如：1000）

• easing：（Optional）用来指定切换效果，默认是"swing"，可以是参数’linear‘（先快后慢，匀速等等）

• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

 $('button').eq(0).click(function () {
      
            $('div').show(1000, function () {
      
                alert('我显示啦！！！')
            })
        });
        $('button').eq(1).click(function () {
      
            $('div').hide(1000, function () {
      
                alert('我隐藏啦！！！')
            })
        });
        $('button').eq(2).click(function () {
      
            $('div').toggle(1000, function () {
      
                alert("我可以反复横跳")
            })
        })

1. 滑动效果

1.下滑效果语法规范

slideDown([speed,[easing],[fn]]);//下拉
slideUP([speed,[easing],[fn]]);//上拉
slideToggle([speed,[easing],[fn]]);//切换

2.显示参数（三个都一样）

• 参数都可以省略，

• speed：三种速度字符串（'slow','normal',fast）或者表示动画时长的毫秒数值（如：1000）

• easing：（Optional）用来指定切换效果，默认是"swing"，可以是参数’linear‘（先快后慢，匀速等等）

• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

1. 事件切换

hover([over],out);//

• over:鼠标移到元素上要触发的函数（相当于mouseenter）

• out:鼠标移出元素上要触发的函数（相当于mouseleave）

// 事件切换hover就是鼠标经过和离开的复合写法
        $('.nav>li').hover(function () {
      
            $(this).children('ul').slideDown(200);//鼠标过去拉下来
        }, function () {
      
            $(this).children('ul').slideUp(300);//鼠标离开拉回去
        })
// 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
        $('.nav>li').hover(function () {
      
            $(this).children('ul').stop().slideToggle();//触发一个切换就有两个效果
        })

1. stop()动画队列及其停止排队方法