jQuery 动画详解——比js动画更方便的方法

jQuery 标准动画

通过类似于动画的形式,来完成标签的显示隐藏
实际上,本质,就是我们之前写的 运动函数
通过 定位的 left top 属性 和 透明度 opacity 来完成效果

1. $(标签).show() 显示

语法 : $(标签).show(时间,运动曲线,运动结束时执行的函数)

运动到指定的位置,也就是css样式,定义的标签位置
离那里进,就从那里开始运动
离 左上角近 就从左上角开始运动

2. $(标签).hide() 隐藏

语法 : $(标签).hide(时间,运动曲线,运动结束时执行的函数)

从原始的位置,开始隐藏
离那里近,就隐藏到那里

3. $(标签).toggle() 切换

语法 : $(标签).toggle(时间,运动曲线,运动结束时执行的函数)

隐藏就改为显示,显示就改为隐藏   

实例

HTML：

<button name="show">显示</button>
<button name="hide">隐藏</button>
<button name="toggle">切换</button>
<div></div>

<script src="./jquery.min.js"></script>

<script>
    // 给显示按钮,添加事件
    $('[name="show"]').click(function(){
        $('div').show( 2000 , 'linear' , function(){
            console.log('div完全显示了');
        } )
    });
    
    
    // 给隐藏按钮,添加事件
    $('[name="hide"]').click(function(){
        $('div').hide( 2000 , 'linear' , function(){
            console.log('div完全隐藏了');
        } )
    });
    
    // 给切换按钮,添加事件
    $('[name="toggle"]').click(function(){
        $('div').toggle( 2000 , 'linear' , function(){
            console.log('div完全切换了');
        } )
    });
</script>

css：

div{
    width: 300px;
    height: 300px;
    background: pink;
    margin: 0 auto;
    /* position: fixed; */
    /* right: 0; */
    display: none;
}

jQuery 折叠动画

通过改变高度，来实现效果。

1. $(标签).slideDown() 显示

语法 : $(标签).slideDown(时间,运动曲线,运动结束时执行的函数)

从 css 设定的位置上 , 下拉显示标签

2. $(标签).slideUp() 隐藏

语法 : $(标签).slideUp(时间,运动曲线,运动结束时执行的函数)

从 css 设定的位置上 , 上卷隐藏标签

3. $(标签).slideToggle() 切换

语法 : $(标签).slideToggle(时间,运动曲线,运动结束时执行的函数)

隐藏就改为显示,显示就改为隐藏

实例

HTML：

<button name="down">折叠显示</button>
<button name="up">折叠隐藏</button>
<button name="toggle">折叠切换</button>
<div></div>

<script src="./jquery.min.js"></script>

<script>
    // 给显示按钮,添加事件
    $('[name="down"]').click(function(){
        $('div').slideDown( 2000 , 'linear' , function(){
            console.log('div完全显示了');
        } )
    });


    // 给隐藏按钮,添加事件
    $('[name="up"]').click(function(){
        $('div').slideUp( 2000 , 'linear' , function(){
            console.log('div完全隐藏了');
        } )
    });

    // 给切换按钮,添加事件
    $('[name="toggle"]').click(function(){
        $('div').slideToggle( 2000 , 'linear' , function(){
            console.log('div完全切换了');
        } )
    });
</script>

css：

div{
    width: 300px;
    height: 300px;
    background: pink;
    margin: 0 auto;
    display: none;
}

jQuery 渐隐渐现动画

通过改变透明度，来实现效果。

1. $(标签).fadeIn() 显示

语法 : $(标签).fadeIn(时间,运动曲线,运动结束时执行的函数)

从 css 设定的位置上 , 下拉显示标签

2. $(标签).fadeOut() 隐藏

语法 : $(标签).fadeOut(时间,运动曲线,运动结束时执行的函数)

从 css 设定的位置上 , 上卷隐藏标签

3. $(标签).fadeToggle() 切换

语法 : $(标签).fadeToggle(时间,运动曲线,运动结束时执行的函数)

隐藏就改为显示,显示就改为隐藏

实例

HTML：

<button name="in">逐渐显示</button>
<button name="out">逐渐隐藏</button>
<button name="toggle">渐隐渐现</button>
<div></div>

<script src="./jquery.min.js"></script>

<script>
    // 给显示按钮,添加事件
    $('[name="in"]').click(function(){
        $('div').fadeIn( 2000 , 'linear' , function(){
            console.log('div完全显示了');
        } )
    });


    // 给隐藏按钮,添加事件
    $('[name="out"]').click(function(){
        $('div').fadeOut( 2000 , 'linear' , function(){
            console.log('div完全隐藏了');
        } )
    });

    // 给切换按钮,添加事件
    $('[name="toggle"]').click(function(){
        $('div').fadeToggle( 2000 , 'linear' , function(){
            console.log('div完全切换了');
        } )
    });
</script>

css：

div{
    width: 300px;
    height: 300px;
    background: pink;
    margin: 0 auto;
    display: none;
}

jQuery 自定义动画

$(标签).animate()

可以通过 自定义动画 实现, css样式的改变
语法形式:
$(标签).animate( {属性:属性值,属性:属性值…} )

参数1: 要改变的 css的属性和属性值   可以没有单位px
参数2: 定义的执行时间
参数3: 定义的运动曲线
参数4: 运动结束,执行的函数

特别注意：有一些css样式，是不能改变的
例如颜色

实例

HTML：

<button name="width">改变宽度</button>
<button name="wh">改变宽度高度</button>
<button name="color">改变颜色</button>
<div>中国</div>

<script src="./jquery.min.js"></script>

<script>
    $('[name="width"]').click(function(){
        let randomW = parseInt(Math.random()*(500+1-100)+100 );
        console.log(randomW);
        $('div').animate({
            width : `${randomW}px`,
        } , 2000 , 'linear' , function(){
            console.log('运动结束了')
        })
    });

    $('[name="wh"]').click(function(){
        let randomW = parseInt(Math.random()*(500+1-100)+100 );
        let randomH = parseInt(Math.random()*(500+1-100)+100 );
        console.log(randomW,randomH);
        $('div').animate({
        
            width : `${randomW}px`,   
            height: `${randomH}px`,
        } , 2000 , 'linear' , function(){
            console.log('运动结束了')
        })
    });

    $('[name="color"]').click(function(){
        let randomColor = `rgb(${parseInt(Math.random()*256)} ,${parseInt(Math.random()*256)} , ${parseInt(Math.random()*256)})`;
        console.log(randomColor);
        $('div').animate({
            background : randomColor,
            color : randomColor,
        } , 2000 , 'linear' , function(){
            console.log('运动结束了')
        })
    });
</script>

css：

div{
    width: 300px;
    height: 300px;
    background: pink;
    margin: 0 auto;
    color: red;
    font-size: 100px;
    /* display: none; */
}

jQuery 停止动画

.stop()

触发程序的执行,会马上停止当前动画的执行
就从标签运动到的当前位置开始,马上执行下一次动画

.finish()

触发程序的执行,会马上停止,当前动画的执行
标签会立即执行动画结束时的效果
从动画结束的位置,开始执行,下一次动画

实例

HTML：

<button name="go">go</button>
<button name="back">back</button>
<div></div>

<script src="./jquery.min.js"></script>

<script>
    // 点击触发,新的运动,会马上停止当前运动,并且在当前运动的终止位置,开始执行新的运动
    $('[name="go"]').click(function(){
        // go上添加,终止的是 back的运动

        $('div').stop().animate( {left:'500px' , top:'500px'} , 2000)
    });

    $('[name="back"]').click(function(){
        // 给back添加 .stop()
        // 作用是 在 执行当前 back的运动之前,如果还有其他正在执行的运动
        // 要立即停止,从当前停止的位置,直接执行back的运动
        // $('div').stop().animate( {left:'0px' , top:'50px'} , 2000);

        // back添加的,实际上是终止的的go的运动
        $('div').finish().animate( {left:'0px' , top:'50px'} , 2000);
        
    });
</script>

css：

div{
    width: 100px;
    height: 100px;
    background: pink;
    position: absolute;
    top:50px;
    left: 0;
}

小结

stop()  和  finish()
都不是操作当前这个运动的
是定义执行当前运动之前,如果还有其他正在执行的运动,应该怎么办
stop()    就从当前标签运动的位置,开始,立即执行下一次运动
finish()  从之前运动的终点目标位置,开始,立即执行下一次运动