CH08-JQuery动画

本章目标

掌握jQuery非自定义动画的使用
掌握jQuery自定义动画的使用

一、非自定义动画

1、显示和隐藏

show() 和 hide() 在显示和隐藏元素时，能定义显示元素时的效果。

其中显示速度可以取如下值：毫秒（如1000）、slow、normal、fast

绘制如下界面，实现显示和隐藏的动画效果：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //点击按钮缓慢显示
            $("#btn1").click(function () {
                $(".tipsbox").show("slow");
            })
            //点击按钮3秒隐藏
            $("#btn2").click(function () {
                $(".tipsbox").hide(3000);
            })
        })
</script>
<input type="button" value="缓慢显示" id="btn1" />
<input id="btn2" type="button" value="3秒隐藏" />
<div class="tipsbox" style="display:none;width:200px;border:2px solid red;">
   <p>显示和隐藏动画</p>          
</div>

2、上卷下拉

**slideUp()**：通过使用滑动效果，隐藏被选元素

例：点击标题时，将段落中的文字进行上卷隐藏

<script src="js/jquery.min.js"></script>
<style>
    #title {
            background-color: blue; 
            color: white;
        	margin:0px;
        }
</style>
<script>
        $(function(){
            //点击标题时，将内容缓慢上卷
             $("#title").click(function () {
                   $("#content").slideUp("slow");
             });
        })
</script>
<h2 id="title">窗边的小豆豆</h2>         
<div id="content">
     <p>本书讲述了作者上小学的一段真实的故事。</p>            
     <p>这本书给世界千万读者无数的笑声和感动。</p>
     <p>同时为现代教育的发展注入了新的活力，成为20世纪全球最具影响的作品之一。</p>
</div>

注：如果元素已经隐藏，则该效果不产生任何变化

**slideDown()**：使用滑动效果，显示隐藏的被选元素

例：首先将内容隐藏，点击标题时，将内容缓慢下拉

<script src="js/jquery.min.js"></script>
<style>
    #title {
            background-color: blue; 
            color: white;
        	margin:0px;
        }
</style>
<script>
        $(function(){
            //点击标题时，将内容缓慢下拉
            $("#title").click(function () {
                $("#content").slideDown("slow");
            });
        })
</script>
<h2 id="title">窗边的小豆豆</h2>         
<div id="content" style="display:none">
     <p>本书讲述了作者上小学的一段真实的故事。</p>            
     <p>这本书给世界千万读者无数的笑声和感动。</p>
     <p>同时为现代教育的发展注入了新的活力，成为20世纪全球最具影响的作品之一。</p>
</div>

注：如果元素已经是完全可见，则该效果不产生任何变化

**slideToggle()**：用滑动效果（高度变化）来切换元素的可见状态。如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

例：点击标题时，实现上卷和下拉的切换

<script src="js/jquery.min.js"></script>
<style>
    #title {
            background-color: blue; 
            color: white;
        	margin:0px;
        }
</style>
<script>
        $(function(){
            //点击标题 将内容进行显示和隐藏的切换
            $("#title").click(function () {               
                $("#content").slideToggle("slow");
            });
        })
</script>
<h2 id="title">窗边的小豆豆</h2>         
<div id="content">
     <p>本书讲述了作者上小学的一段真实的故事。</p>            
     <p>这本书给世界千万读者无数的笑声和感动。</p>
     <p>同时为现代教育的发展注入了新的活力，成为20世纪全球最具影响的作品之一。</p>
</div>

3、淡入淡出

**fadeIn()和fadeOut()**：通过改变元素的透明度实现淡入淡出效果，透明度变化的区间是0~1

绘制界面，实现淡入淡出效果：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //以1000毫秒的速度淡出 
            $("#btn_out").click(function () {
                $("img").fadeOut(1000);
            });
            
            //以较慢的速度淡入
            $("#btn_in").click(function () {
                $("img").fadeIn("slow");
            });

            //以2秒的速度切换淡入淡出
            $("#btn_auto").click(function () {
                $("img").fadeToggle(2000);
            });
        })
</script>
<input type="button" value="淡入效果" id="btn_in" />
<input type="button" value="淡出效果" id="btn_out" />
<input type="button" value="自动切换" id="btn_auto" />
<input type="button" value="指定调整" id="btn_user" />
<div>
    <img src="img/素材.jpg" />
</div>

fadeTo：把匹配元素的透明度以渐进方式调整到指定的值

例：以3秒的速度调整图片透明度至0.5

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
           //以3秒的速度调整不透明度到0.5
            $("#btn_user").click(function () {
                $("img").fadeTo(3000, 0.5);
            });
        })
</script>
<input type="button" value="淡入效果" id="btn_in" />
<input type="button" value="淡出效果" id="btn_out" />
<input type="button" value="自动切换" id="btn_auto" />
<input type="button" value="指定调整" id="btn_user" />
<div>
    <img src="img/素材.jpg" />
</div>

二、自定义动画

1、animate()

animate()用于创建自定义动画的函数，其关键在于指定动画形式及结果样式属性对象

语法：$(“selector”).animate({params},speed,easing,callback);

参数：

params：【必选】该属性包含动画的相关属性及属性值；
speed：【可选】动画显示或隐藏的速度，单位毫秒；
easing：【可选】设置动画速度的函数，可选参数为“linear”、“swing”；
callback：【可选】动画结束后执行的函数名；

例：缓慢放大

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
           //点击按钮两秒的速度放大宽度高度和字体大小
            $("#enlarge2").click(function () {
                $("#content").animate({
            width: "200px", height: +200, fontSize: "200%"}, 2000);
            });
        })
</script>
<input type="button" value="缓慢放大" id="enlarge2" />
<div id="content" style="position:absolute;">
   <p>jQuery!</p>
</div>