jQuery动画详解

1,jQuery的元素操作之动画1-隐藏出现

语法：
显示：标签对象.show(参数1 ,参数2 ,参数3) — 让隐藏的标签,显示
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
隐藏：标签对象.hide(参数1 ,参数2 ,参数3) — 让显示的标签,隐藏
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
隐藏显示切换：标签对象.toggle(参数1 ,参数2 ,参数3) 隐藏—>显示 显示—>隐藏
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序

举例代码：

<button name="block">点我出现</button><br>
<button name="none">点我消失</button><br>
<button name="toggle">点我切换</button><br>

$('[name="block"]').click(function(){
            $('div').show(1000, 'linear' , function(){
                console.log('标签显示了')
            })
        })
        
$('[name="none"]').click(function(){
            $('div').hide(1000, 'linear' , function(){
                console.log('标签隐藏了')
            })
        })
        
$('[name="toggle"]').click(function(){
            $('div').toggle(1000, 'linear' , function(){
                console.log('标签切换了')
            })
        })

2,jQuery的元素操作之动画2-上下动画语法

语法：
显示：标签对象.slideDown()参数1 ,参数2 ,参数3) — 让隐藏的标签,显示
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
隐藏：标签对象.slideUp()(参数1 ,参数2 ,参数3) — 让显示的标签,隐藏
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
隐藏显示切换：标签对象.slideToggle()(参数1 ,参数2 ,参数3) 隐藏—>显示 显示—>隐藏
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序

举例代码：

<button name="block">点我出现</button><br>
    <button name="none">点我消失</button><br>
<button name="toggle">点我切换</button><br>

$('[name="block"]').click(function(){
            $('div').slideDown(1000, 'linear' , function(){
                console.log('标签下拉显示了')
            })
        })
$('[name="none"]').click(function(){
            $('div').slideUp(1000, 'linear' , function(){
                console.log('标签上拉隐藏了')
            })
        })
$('[name="toggle"]').click(function(){
            $('div').slideToggle(1000, 'linear' , function(){
                console.log('标签切换了')
            })
        })

3,jQuery的元素操作之动画3-渐隐渐现

语法：
显示：标签对象.fadeIn()参数1 ,参数2 ,参数3) — 让隐藏的标签,显示
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
隐藏：标签对象.fadeOut()(参数1 ,参数2 ,参数3) — 让显示的标签,隐藏
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序
隐藏显示切换：标签对象.fadeToggle()(参数1 ,参数2 ,参数3) 隐藏—>显示 显示—>隐藏
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序

举例代码：

<button name="block">点我出现</button><br>
 <button name="none">点我消失</button><br>
<button name="toggle">点我切换</button><br>

$('[name="block"]').click(function(){
            $('div').fadeIn(1000, 'linear' , function(){
                console.log('标签逐渐显示了')
            })
        })
$('[name="none"]').click(function(){
            $('div').fadeOut(1000, 'linear' , function(){
                console.log('标签逐渐隐藏了')
            })
        })
$('[name="toggle"]').click(function(){
            $('div').fadeToggle(1000, 'linear' , function(){
                console.log('标签切换了')
            })
        }) 

4,jQuery的元素操作之动画4–指定透明度

语法：
标签对象.fadeOut()(参数1 ,参数2 ,参数3,参数4)
参数1 : 毫秒 也就是动画的执行时间
参数2 : 透明度 小数 0.5 .5 都可以
参数3 : 运动的方式 linear 线性
参数4 : 回调函数 当运动结束时,执行的函数程序
举例代码：

<button>点我切换到指定透明度</button>

$('button').click(function(){
            $('div').fadeTo(1000 , .8 , 'linear' , function(){
                console.log('标签到指定透明度了')
            })
        })

5,jQuery操作之自定义动画

语法：
标签对象.animate(参数1 ,参数2 ,参数3,参数4)
参数1:运动的属性,必须是对象形式{top:100,left:100}
参数2:时间
参数3:运动方式
参数4:回调函数
注意：多属性运动,所有的属性的动画,是同时结束, 支持的属性有限,一般,颜色的属性都不支持
举例代码：

 $('div').animate({width:500,height:200,background:'red'} , 2000 , 'linear' , function(){
        console.log('自定义动画结束了')
    })

6,jQuery操作之动画-stop和finish

语法：
标签对象.stop()
在当前动画执行的位置,立即停止
从当前位置开始,立即执行下一次动画

标签对象 .finish()
在当前动画的终止位置,开始下一次动画
当前动画,立即执行到终止位置
然后从终止位置开始,执行下一次动画
代码举例：

<button name="btn1">点击</button>
    <div name="stop"></div>

    <button name="btn2">点击</button>
<div name="finish"></div>

        // 默认状态
        $('button').click(function(){
            $('div').slideToggle(2000);
        })
        
        // stop 状态
        $('[name="btn1"]').click(function(){
            $('[name="stop"]').stop().slideToggle(10000);
        })

        // finish 状态
        $('[name="btn2"]').click(function(){
            $('[name="finish"]').finish().slideToggle(10000);
        })