jQuery的效果

1.fadeIn 和 fadeOut
$(selector).fadeIn(speed,easing,callback);
$(selector).fadeOut(speed,easing,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的easing参数"swing" - 在开头/结尾移动慢，在中间移动快，“linear” - 匀速移动
可选的 callback 参数是 fading 完成后所执行的函数名称

<p><button>click</button></p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

如果ul 隐藏 display :none,点击按钮的时候这个ul慢慢的出现
如果ul 没设置隐藏,则ul会慢慢的隐藏

 $('p').click(function() {
            if ($('ul').css('display') == 'none') {
                $('ul').fadeIn(3000, 'swing', function() {
                    console.log('淡入效果完成')
                })
            } else {
                $('ul').fadeOut(3000, 'swing', function() {
                    console.log('淡出效果完成')
                })
            }
        })

2.fadeToggle
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的easing参数"swing" - 在开头/结尾移动慢，在中间移动快，“linear” - 匀速移动
可选的 callback 参数是 fading 完成后所执行的函数名称。

$('p').click(function() {
            $('ul').fadeToggle(3000, 'swing', function() {
                console.log('切换淡入淡出效果')
            })
        })

3 fadeTo() 方法
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(selector).fadeTo(speed,opacity,easing,callback);
必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的easing参数"swing" - 在开头/结尾移动慢，在中间移动快，“linear” - 匀速移动
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称

<p><button>click</button></p>
<div style="width100px;height:100px;background:red"></div>

点击按钮,如果div隐藏，div的透明度则会慢慢变小到你设置的值
如果div没隐藏，div的透明度则会慢慢变大到你设置的值

 $('p').click(function() {
            if ($('div').css('display') == 'none') {
                $('div').fadeTo(3000, 0.6, 'swing', function() {
                    console.log('淡入效果完成')
                })
            } else {
                $('div').fadeTo(3000, 0.1, 'swing', function() {
                    console.log('淡出效果完成')
                })
            }
        })

4.slideDown()
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称

5.slideUp() 方法
slideUp() 方法用于向上滑动元素。
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

6. slideToggle() 方法
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

<p><button>click</button></p>
<div style="width100px;height:100px;background:red"></div>

$('p').click(function() {
            $('div').slideToggle(3000, 'swing', function() {
                console.log(111)
            })
        })

7.animate()
$(selector).;animate(target,duration,easing,callback) // target里面不能使用transform ,target指的是目标,只能指定到达的位置
必需的 params 参数定义形成动画的 CSS 属性。
必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的easing参数"swing" - 在开头/结尾移动慢，在中间移动快，“linear” - 匀速移动
可选的 callback 参数是动画完成后所执行的函数名称。.

 $('div').animate({
            width: '+=50',
            height: '+=50',
            left: '+= 50',
            top: '+=50'
        }, 2000, 'swing', function() {
            alert('动画结束了')
        }).animate({
            width: '+=50',
            height: '+=50',
            left: '+= 50',
            top: '+=50'
        }, 2000, 'swing', function() {
            alert('动画结束了')
        })

8.stop() finish() start()

<button id="stop">stop</button>
<button id="finish">finish</button>
 <button id="start">start</button>
 <div style="width100px;height:100px;background:red"></div>

$('#start').on('click', function() {
            $('div').animate({
                left: '+=50'
            }, 1500, 'swing').delay(2000).animate({
                top: '+=50'
            }, 1500, 'swing')
        })
        $('#stop').on('click', function() {
            $('div').stop(true)
        })
        $('#finish').on('click', function() {
            $('div').finish()
        })

如果有两个动画，stop没有参数时，结束第一段动画，直接开始下一段动
stop 有一个true时,停止当前动画
stop 有两个true时，停止当前运动，瞬间移动到第一段动画的状态
如果有一段动画,stop没有参数和有一个参数的效果一样, 停止当前动画
stop 有两个参数，停止当前运动，瞬间移动到当前动画的结束点
finish() 直接达到最后一次目标点