11、jQuery 动画

作者: 一直流浪 | 来源:发表于2022-08-31 11:15 被阅读0次

11.1 三种基本动画

显示(show)与隐藏(hide)是一组动画；
滑入(slideDown)与划出(slideUp)与切换(slideToggle)，效果与卷帘门类似
淡入(fadeln)与淡出(fadeOut)与切换(fadeToggle)

显示与隐藏：

（1）show(参数1,参数2)：显示

参数1：动画时长，可以是数值（单位毫秒）、代表时长的字符串（fast,normal,slow）、
参数2：动画执行完毕后的回调函数
无参：没有动画效果

（2）show(参数1,参数2)：隐藏

参数1：动画时长，可以是数值（单位毫秒）、代表时长的字符串（fast,normal,slow）、
参数2：动画执行完毕后的回调函数
无参：没有动画效果

显示与隐藏案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 500px;
                width: 500px;
                background: red;
                display: none;
                
            }
        </style>
    </head>
    <body>
        <input type="button" value="显示" id='show' />
        <input type="button" value="隐藏" id='hide' />
        <input type="button" value="切换" id='toggle' />
        <br />
        <div id ="div1"></div>
    </body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
    $(function(){
        //(1)显示
        //1.1 如果使用show()无参，是没有动画效果的
        $('#show').click(function(){
            //1.1 如果使用show()无参，是没有动画效果的
//          $('#div1').show();
            
            //1.2 使用show(duration: String, easing: String, callback: Function)可以传入动画参数
            //参数1：代表动画执行的时间，单位是毫秒，也可以是时长的代表字符串：fast,normal,slow
//          $('#div1').show(2000);
//          $('#div1').show('fast');        //200毫秒
//          $('#div1').show('normal');      //400毫秒
            $('#div1').show('slow');        //600毫秒 
//          $('#div1').show('sadasda');     //如果代表时长的单词写错了，相当于写了normal
        
            //1.3 回调函数
//          $('#div1').show('slow',function(){
//              alert('动画执行完毕。。。');
//          });
        
        });
        //(2)隐藏
        //1.1 hide()无参，是没有动画效果的
        $('#hide').click(function(){
            //1.1 如果使用hide()无参，是没有动画效果的
//          $('#div1').hide();
            
            //1.2 使用hide(duration: String, callback: Function)可以传入动画参数
            //参数1：代表动画执行的时间，单位是毫秒，也可以是时长的代表字符串：fast,normal,slow
            //参数2：回调函数
//          $('#div1').hide(2000);
//          $('#div1').hide('fast');        //200毫秒
//          $('#div1').hide('normal');      //400毫秒
            $('#div1').hide('slow');        //600毫秒 
//          $('#div1').hide('sadasda');     //如果代表时长的单词写错了，相当于写了normal
        
            //1.3 回调函数      
//          $('#div1').hide('slow',function(){
//              alert('动画执行完毕。。。');
//          });
        
        });
        
        //3.切换
        //将元素在隐藏和显示之间切换
        //1.1 toggle()无参，是没有动画效果的
        $('#toggle').click(function(){
            //1.1 toggle()无参，是没有动画效果的
//          $('#div1').toggle();
            
            //1.2 使用toggle(duration: String, easing: String, callback: Function)可以传入动画参数
            //参数1：代表动画执行的时间，单位是毫秒，也可以是时长的代表字符串：fast,normal,slow
//          $('#div1').toggle(2000);
//          $('#div1').toggle('fast');      //200毫秒
//          $('#div1').toggle('normal');        //400毫秒
            $('#div1').toggle('slow');      //600毫秒 
//          $('#div1').toggle('sadasda');       //如果代表时长的单词写错了，相当于写了normal
        
            //1.3  回调函数
//          $('#div1').toggle('slow',function(){
//              alert('动画执行完毕。。。');
//          });
        
        });
        
    })  
</script>

滑入和划出：

（1）slideDown(参数1，参数2)：滑入

参数1：动画时长，可以是数值（单位毫秒）、代表时长的字符串（fast,normal,slow）、
参数2：动画执行完毕后的回调函数
无参：默认动画时长为400ms

（2）slideUp(参数1，参数2)：划出

参数1：动画时长，可以是数值（单位毫秒）、代表时长的字符串（fast,normal,slow）、
参数2：动画执行完毕后的回调函数
无参：默认动画时长为400ms

滑入划出案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>滑入划出</title>
        <style>
            div{
                height: 500px;
                width: 500px;
                background: red;
                display: none;
                
            }
        </style>
    </head>
    <body>
        <input type="button" value="滑入" id='slideDown' />
        <input type="button" value="划出" id='slideUp' />
        <input type="button" value="切换" id='slideToggle' />
        <br />
        <div id ="div1"></div>
    </body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
    $(function(){
        /*
         * 滑入    slideDown(参数1，参数2)
         * 参数1：动画执行时长,可以是数字，可以是字符串
         * 参数2：动画执行完毕后的回调函数
         */
        $('#slideDown').click(function(){
            //让id为div1的元素滑入
//          $('#div1').slideDown();    //无参，默认时长为400毫秒
            $('#div1').slideDown(2000);
            $('#div1').slideDown(2000,function(){
                alert("滑入完成");
            });
        });
        
        /*
         * 划出   slideUp(参数1，参数2)
         * 参数1：动画执行时长,可以是数字，可以是字符串
         * 参数2：动画执行完毕后的回调函数
         */
        $('#slideUp').click(function(){
            //让id为div1的元素划出
//          $('#div1').slideUp();    //无参，默认时长为400毫秒
//          $('#div1').slideDown(2000);
            $('#div1').slideUp(2000,function(){
                alert("划出完成");
            });
        });
        
        
        /*
         * 切换  
         * 参数1：动画执行时长,可以是数字，可以是字符串
         * 参数2：动画执行完毕后的回调函数
         */
        $('#slideToggle').click(function(){
            //让id为div1的元素切换
//          $('#div1').slideToggle();    //无参，默认时长为400毫秒
//          $('#div1').slideToggle(2000);
            $('#div1').slideToggle('fast');
//          $('#div1').slideToggle(2000,function(){
//              alert("切换完成");
//          });
        });
    })  
</script>

淡入与淡出：

（1） fadeIn(参数1，参数2)：淡入

参数1：动画时长，可以是数值（单位毫秒）、代表时长的字符串（fast,normal,slow）、
参数2：动画执行完毕后的回调函数
无参：默认动画时长为400ms

（2）fadeOut(参数1，参数2)：淡出

参数1：动画时长，可以是数值（单位毫秒）、代表时长的字符串（fast,normal,slow）、
参数2：动画执行完毕后的回调函数
无参：默认动画时长为400ms

（3）fadeToggle(参数1，参数2)：切换

参数1：动画时长，可以是数值（单位毫秒）、代表时长的字符串（fast,normal,slow）、
参数2：动画执行完毕后的回调函数
无参：默认动画时长为400ms

（4）fadeTo(参数1，参数2，参数3)：淡入到什么程度

参数1：动画时长，可以是数值（单位毫秒）、代表时长的字符串（fast,normal,slow）、
参数2：透明度
参数3：动画执行完毕后的回调函数

淡入与淡出案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>淡入淡出</title>
        <style>
            div{
                height: 500px;
                width: 500px;
                background: red;
                display: none;              
            }
        </style>
    </head>
    <body>
        <input type="button" value="淡入" id='fadeIn' />
        <input type="button" value="淡出" id='fadeOut' />
        <input type="button" value="切换" id='fadeToggle' />
        <input type="button" value="淡入到哪里" id='fadeTo' />
        <br />
        <div id ="div1"></div>
    </body>
</html>

<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
    $(function(){
        /*1.淡入  fadeIn(参数1，参数2)
         * 参数1：动画时长
         * 参数2：回调函数
         */
        $('#fadeIn').click(function(){
            //让id为div1的元素淡入
//          $('#div1').fadeIn();    //默认的动画时长，400ms
//          $('#div1').fadeIn(2000);
            $('#div1').fadeIn(1000,function(){
                alert('淡入完成');
            });         
        });
        
        /*2.淡出  fadeOut(参数1，参数2)
         * 参数1：动画时长
         * 参数2：回调函数
         */
        $('#fadeOut').click(function(){
            //让id为div1的元素淡入
//          $('#div1').fadeOut();    //默认的动画时长，400ms
//          $('#div1').fadeOut(2000);
            $('#div1').fadeOut(1000,function(){
                alert('淡出完成');
            });         
        });
        
        /*3.切换  fadeToggle(参数1，参数2)
         * 参数1：动画时长
         * 参数2：回调函数
         */
        $('#fadeToggle').click(function(){
            //让id为div1的元素淡入
            $('#div1').fadeToggle(1000);    //默认的动画时长，400ms
//          $('#div1').fadeToggle(2000);
//          $('#div1').fadeToggle(1000,function(){
//              alert('切换完成');
//          });         
        });
        
        /*3.淡入到哪里  fadeTo(参数1，参数2,参数3)
         * 参数1：动画时长
         * 参数2：透明度
         * 参数2：回调函数
         */
        $('#fadeTo').click(function(){
            //让id为div1的元素淡入
//          $('#div1').fadeTo(1000,0.5);    //默认的动画时长，400ms
            
            $('#div1').fadeTo(1000,0.5,function(){
                alert('淡入完成');
            });         
        });
    })
</script>

11.2 自定义动画

自定义动画： animate(参数1，参数2，参数3，参数4)

参数1：必选的对象代表的是需要做动画的属性
参数2：可选的代表执行动画的时长
参数3：可选的代表的是缓动还是匀速 linear(匀速),swing(缓动，默认)
参数4：动画执行完毕后的回调函数

自定义动画案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义动画</title>
        <style>
            div{
                height: 100px;
                width: 100px;
                background: red;
                position: absolute;
                left: 0px;
            }
            #div1{
                top: 50px;
            }
            #div2{
                top:300px
            }
        </style>
    </head>
    <body>
        <input type="button" value="从左到右800" id="lr800" />
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
</html>

<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
    $(function(){
        /*
        * 自定义动画    animate(参数1，参数2，参数3，参数4)
        * 参数1：必选的  对象  代表的是需要做动画的属性
        * 参数2：可选的  代表执行动画的时长
        * 参数3：可选的  代表的是缓动还是匀速   linear(匀速),swing(缓动，默认)
        * 参数4：动画执行完毕后的回调函数
        */
        $('#lr800').click(function(){
            //让id为lr800的元素移动到800位置
//          $('#div1').animate({
//              left:800,
//              width:200,
//              height:200,
//              opacity:0.5
//          },2000,'linear',function(){
//              alert('动画执行完毕');
//          });
//          
//          $('#div2').animate({
//              left:800,
//              width:200,
//              height:200,
//              opacity:0.5
//          },2000,'swing');
            
            $('#div1').animate({
                left:800,
                width:200,
                height:200,
                opacity:0.5
            },2000,'linear',function(){
                //回调函数里面可以接着做动画
                $('#div1').animate({
                left:400,
                width:300,
                height:300,
                top:150,
                opacity:0.5
                },2000)
            });         
        })
    })
</script>

案例：模拟开机动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>模拟开机动画</title>
        <style>
        
            .box{
                position: fixed;
                bottom: 0;
                right: 0;
                clear: none;
            }
            #closeButton{
                bottom: 200;
                right: 0;

            }
        </style>
    </head>
    <body>
        <div class="box" id="box">
            <img id="closeButton" src="img/关  闭.png" ></img>
            
            <div class="hd" id="headPart">
                <img src="img/6.jpg" />
            </div>
            <div class="bd" id="bottomPart">
                <img src="img/7.jpg" />
            </div>
        </div>
    </body>
</html>

<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
    $(function(){
        $('#closeButton').click(function(){
            //让下面的部分高度变为0
            $('#bottomPart').animate({
                height:0
            },1000,function(){
                //让整个大盒子的向右移动为0
                $('#box').animate({
                    width:0
                },1000);
            });
        });
        
    })
</script>

11.3 动画队列——stop方法

停止动画：stop(参数1，参数2)

参数1：是否清除动画队列
参数2：是否跳转到最终结果

取消动画队列案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 300px;
                height: 300px;
                background: red;
                display: none;
            }
        </style>
    </head>
    <body>
        <input type="button" value="开始动画" id="start" />
        <input type="button" value="停止动画" id="stop" />
        <div id="div1"></div>
    </body>
</html>

<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
    $(function(){
        //1.开始动画，模拟动画队列
        $('#start').click(function(){
            $('#div1').slideDown(2000).slideUp(2000);
        })
        
        //2.停止动画，执行stop()
        /*
         * 停止动画：stop(参数1，参数2)
         * 参数1：是否清除动画队列
         * 参数2：是否跳转到最终结果
         */
        $('#stop').click(function(){
//          $('#div1').stop(true,true);
//          $('#div1').stop(true,false);
//          $('#div1').stop(false,true);
            $('#div1').stop(false,false);   //无参默认(false,false)
            
            
        })
    })
</script>

11、jQuery 动画

11.1 三种基本动画

显示与隐藏：

显示与隐藏案例：

滑入和划出：

滑入划出案例：

淡入与淡出：

淡入与淡出案例：

11.2 自定义动画

自定义动画案例：

案例：模拟开机动画

11.3 动画队列——stop方法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读