jQuery学习笔记（四）jQuery中的动画

2022-10-11 09:58:23

目录

jQuery最吸引人的地方莫过于能做出绚丽的动画了，也是能极大提高用户体验的地方，这次我们就来一探jQuery中的动画！

一. show()方法和hide()方法

show()方法与hide()方法是jQuery中最基本的动画方法，hide()方法设置是将所匹配的元素的样式display甚至为none。使用方法也很简单。

$("element").show();                                     //将元素element显示

$("element").hide();                                     //将元素element隐藏

$("element").css("display","none");                      //将元素element隐藏,hide()方法效果一致。

如果仅仅是这样，那么丝毫体现不出jQuery中的强大，动画至少要让元素感觉是动起来的感觉！那么这种效果应该怎么做呢，其实很简单，需要在show()与hide()里面添上参数即可，添上的参数代表在多长时间内进行显示，或是多长事件内进行小时，所需注意的是参数的单位为毫秒，比如说$(“element”).show(3000);在3000毫秒内显示，即3秒种内显示完成。这种方法在显示或者隐藏的时候，内容与透明图都是渐进的显示或隐藏的，所以有一种动画的感觉。

二. fadeIn()方法和fadeOut()方法

fadeIn()、fadeOut()与show()、hide()的差别就在与它们只改变其透明度，简单而言，其效果就是要实现淡进、淡出的效果。该方法的具体使用情况参考上例。

三.slideUp()和slideDown()方法

slideUp()和slideDown()方法与show()、hide()方法的差别就在于其改变的是元素的高度，使元素由上而下的展示，就仿佛拉开上下式的那种窗帘的感觉一样！我们还是来看一个具体的实例。

<script type="text/javascript">

        $(function () {

            $("h5.head").toggle(function () {

                $(this).next().slideUp(2000);                //在2秒内完成展示

            }, function () {

                $(this).next().slideDown(2000);              //在2秒内完成收缩

            })

        })

</script>

<div id="panel">

    <h5 class="head">怎么样？</h5>

    <div class="content">还不错哦。<br />

     <p>还好</p>

     <p>还行</p>

     <p>还可以</p>

    </div>

</div>

其显示效果就会如图1所示，是逐渐拉开的。

jQuery学习笔记（四）jQuery中的动画另外我们还可以在参数里面通过具体的数字来设置快慢程度，或者使用”slow”、”normal”、”fast”来控制速度。

四. 自定义动画方法 animate()

事实上，上面介绍的动画远远不能满足于我们的需求，很多时候，我们必须自定义我们的动画，下面就来说说自定义的动画。自定义动画是通过方法animate()方法来实现的。其语法结构为：animate(params,speed,callback);第一个包含央视属性及值的映射。第二个参数speed是表示速度的参数，为可选参数。第三个参数是指在动画完成之后执行的函数，也是可选参数。下面我们以一个具体的例子来说明。我们做一个动画效果。先看HTML代码。

<style type="text/css">

#panel

{

    position:relative;

    width:100px;

    height:100px;

    border:1px solid #0050D0;

    background:#111D1F;

    cursor:pointer;

}

</style>

<body>

    <div id="panel"></div>

</body>

即为一个正方形的div区域，如图2所示。jQuery学习笔记（四）jQuery中的动画我们的目标就是要是这个正方形区域动起来，使其动起来！其目标效果是：先使其向右移动，然后在向右移动的时候，我们使其高度也同时增加，当向右移动到一定程度的时候，我们再试其向下移动，并使宽度增加，最后移动到目标位置后，在另图形消失！具体jQuery代码如下：

<script type="text/javascript">

        $(function () {  //加载DOM

            $("#panel").css("opacity", "0.5"); //先设置div区域的不透明度

            $("#panel").click(function () {

                $(this).animate({ left: "400px", height: "200px", opacity: "1" }, 3000)   //令<div>区域在3秒内向右移动,移动的过程中使高度调至
为200px

                .animate({ top: "200px", width: "200px" }, 3000)                         //令<div>区域在3秒内向下移动,并使宽度调至为200px

                .fadeOut();   //令其逐渐淡出

            });

        });

</script>

你也可以动手试试其效果！

五. toggle().slideToggle(),fadeTo(),fadeToggle()方法

toggle()用来切换元素的可见状态。如果元素可见，则转换为隐藏，如果元素是隐藏的，则切换为隐藏的，如果元素是隐藏的，则切换为可见的。

我们看下述代码。

$("#element").click(function{

    $(this).toogle();

});

其效果与下述代码是一样的。

$("#element").toogle(function(){

    $(this).hide();

},function(){

    $(this).show();

});

换句话说，toogle()就是用于替代hide()，show()的综合效果的，正如jQuery所倡导的那句话：Do more,Write less!

说完了toogle()，我们再来看看slideToggle(),其是通过高度变化来切换匹配元素的可见性。我相信您也一定知道这个方法的出现是用来代替哪两个方法的组合的了？正是slideUp与slideDown。

fadeTo()方法可以把匹配元素的不透明度以渐进的方式调整到指定的值。

哪fadeToggle()呢？一句话你就明白：它的出现是为了代替fadeIn与fadeOut()的组合效果！

六. jQuery中的动画的各个方法总结比较

说了那么多方法，估计大家都迷糊了，下面列个表格进行比较一番，以区分他们的区别。同时，也便于大家在忘了动画中的一些方法时，可以快速查询。见表1。

方法名

说明
show()和hide() 同时修改匹配元素的高度、宽度和不透明度
fadeIn()和fadeOut() 只改变不透明度
slideUp()和slideDown() 只改变高度
fadeTo() 只改变不透明度
toogle() 用来代替show()和hide()，所以能够同时修改匹配元素的高度、宽度和不透明度
slideToggle() 用来代替slideUp()方法和slideDown()方法，只修改高度
fadeToggle() 用来代替fadeIn()方法和fadeOut()方法，只修改不透明度
animate() 自定义方法，具体介绍见第四节，事实上，以上方法都是调用animate()方法

七. 动画示例效果

说了这么多方法，那么具体来一个详细点的Demo示例吧，来好好体会下jQuery给网页带来的变化！我们所有做的效果就是类似于在视频网站上，可以动态滑动的视频或者图片，首先我们绘制好我们的html代码，具体如下:

<div class="v_show">

        <div class="v_caption">

            <h2 class="cartoon" title="卡通动漫">

                卡通动漫</h2>

            <div class="highlight_tip">

                <span class="current">1</span><span>2</span><span>3</span><span>4</span>

            </div>

            <div class="change_btn">

                <span class="prev">上一页</span> <span class="next">下一页</span>

            </div>

            <em><a href="#">更多>></a></em>

        </div>

        <div class="v_content">

            <div class="v_content_list">

                <ul>

                    <li><a href="#">

                        <img src="img/01.jpg" alt="海贼王" /></a><h4>

                            <a href="#">海贼王</a></h4>

                        <span>播放:<em>28,276</em></span></li>

                    <li><a href="#">

                        <img src="img/01.jpg" alt="海贼王" /></a><h4>

                            <a href="#">海贼王</a></h4>

                        <span>播放:<em>28,276</em></span></li>

                    <li><a href="#">

                        <img src="img/01.jpg" alt="海贼王" /></a><h4>

                            <a href="#">海贼王</a></h4>

                        <span>播放:<em>28,276</em></span></li>

                    <li><a href="#">

                        <img src="img/01.jpg" alt="海贼王" /></a><h4>

                            <a href="#">海贼王</a></h4>

                        <span>播放:<em>28,276</em></span></li>

                    <li><a href="#">

                        <img src="img/02.jpg" alt="哆啦A梦" /></a><h4>

                            <a href="#">哆啦A梦</a></h4>

                        <span>播放:<em>33,326</em></span></li>

                    <li><a href="#">

                        <img src="img/02.jpg" alt="哆啦A梦" /></a><h4>

                            <a href="#">哆啦A梦</a></h4>

                        <span>播放:<em>33,326</em></span></li>

                    <li><a href="#">

                        <img src="img/02.jpg" alt="哆啦A梦" /></a><h4>

                            <a href="#">哆啦A梦</a></h4>

                        <span>播放:<em>33,326</em></span></li>

                    <li><a href="#">

                        <img src="img/02.jpg" alt="哆啦A梦" /></a><h4>

                            <a href="#">哆啦A梦</a></h4>

                        <span>播放:<em>33,326</em></span></li>

                    <li><a href="#">

                        <img src="img/03.jpg" alt="火影忍者" /></a><h4>

                            <a href="#">火影忍者</a></h4>

                        <span>播放:<em>28,276</em></span></li>

                    <li><a href="#">

                        <img src="img/03.jpg" alt="火影忍者" /></a><h4>

                            <a href="#">火影忍者</a></h4>

                        <span>播放:<em>28,276</em></span></li>

                    <li><a href="#">

                        <img src="img/03.jpg" alt="火影忍者" /></a><h4>

                            <a href="#">火影忍者</a></h4>

                        <span>播放:<em>28,276</em></span></li>

                    <li><a href="#">

                        <img src="img/03.jpg" alt="火影忍者" /></a><h4>

                            <a href="#">火影忍者</a></h4>

                        <span>播放:<em>28,276</em></span></li>

                    <li><a href="#">

                        <img src="img/04.jpg" alt="龙珠" /></a><h4>

                            <a href="#">龙珠</a></h4>

                        <span>播放 <em>57,865</em></span></li>

                    <li><a href="#">

                        <img src="img/04.jpg" alt="龙珠" /></a><h4>

                            <a href="#">龙珠</a></h4>

                        <span>播放 <em>57,865</em></span></li>

                    <li><a href="#">

                        <img src="img/04.jpg" alt="龙珠" /></a><h4>

                            <a href="#">龙珠</a></h4>

                        <span>播放 <em>57,865</em></span></li>

                    <li><a href="#">

                        <img src="img/04.jpg" alt="龙珠" /></a><h4>

                            <a href="#">龙珠</a></h4>

                        <span>播放 <em>57,865</em></span></li>

                </ul>

            </div>

        </div>

    </div>

然后为其添加好css样式，最终呈现的效果如图3所示jQuery学习笔记（四）jQuery中的动画

由于我们重点来说的是jQuery，所以对于css样式以及整个网页提供附件，就不详细说css了。那好，我们的工作就正式开始了，需要为其添加jQuery代码，所达到的效果就是通过点击卡通动漫旁的左右按钮来切换图片。

首先，我们来分析下流程。我们总共是16张图片，因为加css样式的原因所以现在只显示了4张图片，我们暂且把显示出来的四张图片成为一个版面，即海贼王的四张图片，还有四张哆啦A梦，四张火影忍者，四张龙珠的照片需要我们滚动显示，即每按一次图3中红圈圈出来的按钮，图片就会自动切换，比如按向右的按钮就会自动切换到四张哆啦A梦上，总共是16张图片，我们需要滑动4次，也就是说滑动4个版面。

分析到这里，那么大家就应该明白jQuery代码在大体方面包含两个方面，一个是点击向右箭头的click事件，使其版面自动向右滑动，另一个就是点击向左箭头的click事件。我们在这里详细说下点击向右箭头的click事件。在滑动的时候我们实现的动画方法采用的是animate()；通过设置其left属性来控制。

再次，图3中还有一部分需要我们去处理，那就是“卡通动漫”这四个字旁边的小圆点，当前版面的圆点会显示为高亮，也就是会显示为蓝色。那么，也就是指在我们点击箭头的时候，圆点也会同时移动，比如点击右箭头，第二个圆点就会高亮，同时也会去除第一个圆点的高亮效果，这是通过addClass()方法来添加一个“current”样式，已在css代码中写好了。

分析到了这里，那么我们就具体看看代码吧。此处只列出向右的箭头的click代码。

<script type="text/javascript">

           var page = 1;                           //当前版面为第一个版面

            var i = 4;                              //每版放四个图片

            var len = $("ul li").length;            //总的图片数目

            var page_Count = Math.ceil(len / i);    //用天花板函数取得总共的版面数

            var v_width = $(".v_content").width();  //获取id=v_contend的<div>区域的宽度，次宽度即为下一个版式滑动的宽度

            //设置鼠标点击下一页按钮，版面就会自动滑动

            $("span.next").click(function () {      //绑定click事件

                if (!$(".v_content_list").is(":animated")) {             //判断当前动画是否正在进行

                    if (page == page_Count)        //当前版面为最后一个版面，此时再外下滑，应该滑回第一个版面

                    {

                        $(".v_content_list").animate({ left: "0px" }, "normal");

                        page = 1;

                    }

                    else {                            //滑动到下一版面

                        $(".v_content_list").animate({ left: "-=" + v_width }, "normal");

                        page++;

                    }
//为当前版面的圆点添加"current"样式，并去除其他版面的"current"样式,即完成分析中的第三步

                    $("div.highlight_tip").find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");   
                }

            });

</script>

好了，这个Deomo就分析到这里，具体的代码我打包到附件中，大家可以下载查看。jQuery中最绚丽的部分恐怕就是实现动画效果了，其实，很多复杂的动画也是由简单的动画叠加而成，而且jQuery实现动画的方式很简洁（相对javascript而言)，尤其是很多代码都可以通过链式操作的方式进行书写，比如这个Deomo中我们实现圆点样式的改变就是通过链式操作，jQuery中的动画就写到这里。

jQuery学习笔记（四）jQuery中的动画     点击此处下载动画示例代码

上一篇：【RN】触摸Touchable...的区别（TouchableWithoutFeedback TouchableOpacity）


下一篇：python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax