jQuery中的动画

最新推荐文章于 2022-11-14 11:02:51 发布

向着阳光奔跑的少年

最新推荐文章于 2022-11-14 11:02:51 发布

阅读量4.9k

点赞数 1

分类专栏： jQuery Web前端开发文章标签： jquery 动画 jquery动画视频切换

本文链接：https://blog.csdn.net/li286487166/article/details/51178641

版权

jQuery 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Web前端开发

5 篇文章 0 订阅

订阅专栏

本文介绍了jQuery中的动画方法，包括show()、hide()、fadeIn()、fadeOut()等，并详细讲解了自定义动画方法animate()的使用。同时，通过一个视频切换案例展示了如何运用jQuery动画实现动态效果。

摘要由CSDN通过智能技术生成

一、jquery中的动画

动画效果也是jquery库吸引人的地方，通过jquery的动画方法，能够轻松地为网页添加非常精彩的视觉效果，给用户一种全新的体验。

1.1show()方法和hide()方法

show()方法和hide()方法是jQuey中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为none

    $("element").hide();//通过hide()方法隐藏元素
    element.css("display","none");//通过css()方法隐藏元素

当元素隐藏后，可以使用show方法将元素的display样式设置为先前的显示状态

$("element").show();

注意：用jquery做动画要求要在标准模式下，否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.show(“slow”)方法和hide(1000)方法让元素动起来

传递参数slow=600 normal=400 fast=200 参数是一个数字，单位是毫秒

左上角向右下角显示，右下角向左下角隐藏

3.fadeIn()方法和fadeOut()方法：淡入和淡出效果

只改变元素的不透明度。

fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失display:none.
    fadeIn()方法则相反
    传递参数slow=600 normal=400 fast=200 参数是一个数字，单位是毫秒

2.3 slideUp()和slideDown()方法

slideUp()和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为none,当调用slideDown()方法时，这个元素将由上至下延伸显示。

传递参数slow=600 normal=400 fast=200 参数是一个数字，单位是毫秒

2.4自定义动画方法animate()

前面已经讲了3种类型的动画。其中
slow()方法和hide方法会同时修改元素的多个样式属性，即高度、宽度和不透明度；
fadeOut方法和fadeIn方法只会修改元素的不透明度
slideDown方法和slideUp方法只会改变元素的高度
很多情况下，这些方法无法满足用户的各种需求，那么就需要对动画有更多的控制，需要采取一些高级的自定义动画来解决这些问题。在jquery‘中，可以使用animate方法来自定义动画

animate(params,speed,callback)
    params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...}
    speed:速度参数，可选
    callback：在动画完成时执行的函数，可选。

1.自定义简单动画


    <style type="text/css">
        #panel {
        position:relative;
        width:100px;
        height:100px;
        border:1px solid #0050D0;
        background: #96E555;
        cursor: pointer;
    }
    </style>

为了让元素动起来，要更元素的left样式属性。需要注意的是在使用animate()方法之前，为了能影响该元素的top，left，bottom和right样式属性，必须先把元素的position样式设置为relative或者absolute。本例中是relative

$("#panel").click(function(){
        $(this).animate({left:"500px"},3000);//让元素向右移动500px。因为初始left是0px
    })

你再次点击时，该元素就不向右边动了。

2.累加、累减动画

在之前的代码中，添加-=或者+=表示在当前位置累加，累减。

$(this).animate({left:"+=500px"},3000);//在当前位置让元素向右移动500px。

3.多重动画

①同时执行多个动画

    //在元素向右滑动的同时，放大元素的高度。
    $(this).animate({left:"500px",height:"200px"},3000);

②按顺序执行多个动画

    //先向右滑动，最后放大元素的高度
    $(this).animate({left:"500px"},3000);
    $(this).animate({height:"200px"},3000);
    //还可以使用链式写法，简写以上代码
    $(this).animate({left:"500px"},3000).animate({height:"200px"},3000);

4.综合动画

单击div元素后让它向右移动的同时增大它的高度，并将它的不透明度从50%变换到100%，然后再让它从上到下移动，同时它的宽度变大，当完成这些效果后，让它以淡出的方式隐藏。

$(this).css("opacity",0.5);
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"500px",width:"200px"},3000).fadeOut(3000);

5.动画回调函数

如果我们想在最后一步不是淡出元素，而是改变css样式。是否只要将上面的淡出方法用css方法替代就行了吗？

$(this).animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"500px",width:"200px"},3000).css("border","5px solid blue");

运行后，它是先改变了css的样式，并没有在最后一步改变样式属性，因此必须在最后一步使用回调函数，加入到动画队列中去。

$(this).animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"500px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")});

6.停止动画和判断是否处于动画状态

1.停止元素的动画 stop()

stop([clearQueue][,gotoEnd])

参数都是可选参数。为boolean值。
clearQueue代表是否要清空未执行完的动画队列，
gotoEnd代表是否直接将正在执行的动画跳转到末状态。

如果直接使用stop()方法，则会立即停止当前正在进行的动画，
如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。

案例联想：
在为一个元素绑定hover事件之后，用户把光标移入元素时会触发动画效果，而当这个动画还没结束时，用户就将光标移出这个元素了，那么光标移出的动画效果将会被放进队列之中，等待光标移入的动画结束后再执行。因此如果光标移入移出得过快就会导致动画效果与光标的动作不一致。因此只要在光标的移入、移出动画之前加入stop()方法，就能解决这个问题。
stop()方法会结束当前正在执行的动画，并立即执行队列中的下一个动画。

//为该元素添加进入和离开的事件
    $("#panel").hover(function(){
        //添加进入事件
        $(this).stop().animate({height : "150",width : "300"},200);
    },function(){
        //添加离开事件
        $(this).stop().animate({height : "22" , width : "60"},300);
    });

这确实解决了这一问题。倘若是

$("#panel").hover(function(){
        //添加进入事件
        $(this).stop().animate({height : "150",width : "300"},200)//如果在此触发了光标移出的事件，将执行下面的动画，而非光标移出事件中的动画，从中可以知道stop默认的第一个参数是false。
            .animate({width : "150"},300);
    },function(){
        //添加离开事件
        $(this).stop().animate({height : "22" , width : "60"},300);
    });

若要解决上面的问题，必须使用带参数的方法

    $("#panel").hover(function(){
        //添加进入事件
        $(this).stop(true).animate({height : "150",width : "300"},200).animate({width : "150"},300);
    },function(){
        //添加离开事件
        $(this).stop(true).animate({height : "22" , width : "60"},300);
    });

第2个参数gotoEnd可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况，可以通过stop(false,true)这种方式来让动画直接到达末状态。
当然也可以两者结合起来使用
注意，jquery只能设置正在执行的动画的最终状态，而没有提供直接到达末执行动画队列的方法。

    $("div.content").animate({width:"30"},200)
    .animate({height:"150"},200)
    .animate({opacity:"0.2"},200)
    无论怎么设置stop方法，均无法再改变width或者height时，将此div元素的末状态变成30*150的大小，并且透明度为0.2

2.判断元素是否处于动画状态

在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate()动画时，就会出现动画积累。解决方法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。

if(! $(element).is(":animated")){//判断元素是否正处于动画状态
        //如果当前没有进行动画，则添加新动画
    }

这个判断方法在animate()动画中经常被用到，需要特别注意。

2.7其他动画方法

toggle(speed,[callback])

现实与隐藏切换

slideToggle(speed,[callback])

显示与隐藏切换，但是是通过改变高度实现的

fadeTo(speed,opcity,[callback]) 

将元素的透明度，设置为指定的值。

2.8动画方法概括

从基本动画方法hide()和show()到fadeIn()和fadeOut(),然后到slideUp()和slideDown(),再到自定义动画方法animate()，最后到交互动画方法toggle()、slideToggle()和fadeTo().

1.改变样式属性

hide()和show() 同时修改多个样式属性，高度、宽度和不透明度

    fadeIn()和fadeOut() 只改变不透明度

    slideUp() 和slideDown()只改变高度

    fadeTo()只改变不透明度

    toggle()用来代替hide和show方法，所以会同时修改多个样式属性即高度、宽度和不透明度

    slideToggle()用来代替slideUp和slideDown方法。所以只能改变高度

    animate 属于自定义动画的方法。以上各种动画方法实质内部都调用了animate方法。

用animate()方法代替show()方法

$("p").animate({height:"show",width:"show",opacity:"show"},400);

    等价于

    $("p").show(400);

    $("p").fadeIn(400) 等价于 $("p").animate({opacity:"show"},400);

    在animate方法中内置了特定样式属性的简写形式。这些特定的属性值可以为show、hide、toggle

2.动画队列

(1)一组元素上的动画效果

当在一个animate方法中应用多个属性时，动画是同时发生的。
当以链式的写法应用动画方法时，动画是按照顺序发生的。

（2）多组元素上的动画效果

默认情况下，动画都是同时发生的
当以回调的形式应用动画方式时，动画是按照回调顺序发生的。

二、案例——视频的切换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>MyHtml.html</title>

        <script src="jquery-1.11.3.js" type="text/javascript">      

        </script>


    <style type="text/css">

    * { 
        margin:0;  /*外边距*/
        padding:0; /*内边距*/
        word-break:break-all;  /*换行规则：break-all允许在单词内换行，keep-all只能在半角空格或连字符处换行。normal使用浏览器默认的换行规则*/
    }
    body { 
        background:#FFF; /*背景颜色白色*/
        color:#333;  /*字体颜色*/
        font:12px/1.5em Helvetica, Arial, sans-serif;  /*字体大小1em等于当前字体大小，2em等于当前字体大小2倍 字体Helvetica，Arial, sans-serif*/
    }
    h1, h2, h3, h4, h5, h6 { font-size:1em; }
    a { 
        color:#2B93D2; 
        text-decoration:none; /*文本修饰： none默认 underline下划线 overline 定义文本上的一条线。line-through定义穿过文本下的一条线。blink  定义闪烁的文本。inherit 规定应该从父元素继承 text-decoration 属性的值。*/
    }
    /*在当鼠标指针在超链接上*/
    a:hover { 
        color:#E31E1C; 
        text-decoration:underline; /*文本用下划线修饰*/
    }
    ul, li { 
        list-style:none; /*此处none为无列表项标记。简写属性在一个声明中设置所有的列表属性。list-style-type 类型 list-style-position列表项标记 list-style-image使用图像代替列表项标记*/
    }
    fieldset, img { 
        border:none; /*无边框*/
    }
/*定义整体显示区*/
.v_show { 
    width:595px;  /*定义显示区的宽度595px*/
    margin:20px 0 1px 60px; /*定义显示区外边距，上外边距20px，右外边距0px，下外边距1px左外边距60px*/
}
/*定义头部和菜单区的属性*/
.v_caption { 
    height:35px; /*高度35px*/
    overflow:hidden; /*如果溢出元素的内容区域的话,进行裁剪*/
    background:url(img/btn_cartoon.gif) no-repeat 0 0; /*背景图片仅显示一次，从左上角开始显示*/
}
.v_caption h2 
{ 
    float:left; /*浮动在左侧*/
    width:84px; /*宽度84px*/
    height:35px; /*高度35px*/
    overflow:hidden; /*如果溢出元素的内容区域的话,进行裁剪*/
    background:url(img/btn_cartoon.gif) no-repeat;  /*背景图片仅显示一次，从左上角开始显示*/
    text-indent:-9999px; /*首行缩进*/
}
.v_caption .cartoon { 
    background-position: 0 -100px; /*设置背景图像的开始位置*/
}
.v_caption .variety { 
    background-position:-100px -100px; /*设置背景图像的开始位置*/
}
.highlight_tip { 
    display:inline; /*默认。此元素会被现实为内联元素，元素前后没有换行符，在同一行显示*/
    float:left; /*浮动在左侧*/
    margin:14px 0 0 10px; /*定义外边距*/
}
.highlight_tip span { 
    display:inline; /*默认。此元素会被现实为内联元素，元素前后没有换行符，在同一行显示*/
    float:left; /*浮动在左侧*/
    width:7px; /*宽度7px*/
    height:7px; /*高度7px*/
    overflow:hidden; /*如果溢出元素的内容区域的话,进行裁剪*/
    margin:0 2px; /*设置外边距：上下为0px左右为2px*/
    background:url(img/btn_cartoon.gif) no-repeat 0 -320px; /*设置背景图像的开始位置0 -320px*/
    text-indent:-9999px; /*首行缩进*/
}
.highlight_tip .current { 
    background-position:0 -220px; /*设置背景图像的开始位置0 -220px*/
}
.change_btn { 
    float:left; /*浮动在左侧*/
    margin:7px 0 0 10px; /*设置外边距上边距7px右边距0px下边距0px左边距10px*/
}
.change_btn span { 
    display:block; /*此元素将显示为块级元素，此元素前后会带有换行符。*/
    float:left; /*浮动在左侧*/
    width:30px; /*设置宽度30px*/
    height:23px; /*设置高度23px*/
    overflow:hidden; /*如果溢出元素的内容区域的话,进行裁剪*/
    background:url(img/btn_cartoon.gif) no-repeat; 
    text-indent:-9999px;  /*首行缩进*/
    cursor:pointer;  /*鼠标形状为手形*/
}
.change_btn .prev { 
    background-position:0 -400px;  /*设置背景图像的开始位置0 -400px*/
}
.change_btn .next { 
    width:31px; /*宽度31px*/
    background-position:-30px -400px; /*设置背景图像的开始位置-30px -400px*/
}
.v_caption em {
    display:inline; /*默认。此元素会被现实为内联元素，元素前后没有换行符，在同一行显示*/
    float:right; /*浮动在右侧*/
    margin:10px 12px 0 0; /*设置外边距*/
    font-family:simsun; /*设置字体*/
}
/*内容区域*/
.v_content { 
    position:relative; /*相对布局生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素*/
    width:592px; 
    height:160px; 
    overflow:hidden; /*如果溢出元素的内容区域的话,进行裁剪*/
    border-right:1px solid #E7E7E7; /*设置右边框：大小1px 线形 颜色*/
    border-bottom:1px solid #E7E7E7; /*设置下边框：大小1px 线形 颜色*/
    border-left:1px solid #E7E7E7; /*设置左边框：大小1px 线形 颜色*/
}
/*视频展示区域*/
.v_content_list { 
    position:absolute; /*绝对布局*/
    width:2500px;/*宽度2500px*/
    top:0px; /*距离顶部0px，因为使用了绝对布局或者相对布局才会有的属性*/
    left:0px; /*距离左边0px因为使用了绝对布局或者相对布局才会有的属性*/
}
.v_content ul {
    float:left;/*浮动在左边*/
}
.v_content ul li { 
    display:inline; /*让这个元素成为内联元素，元素两侧不添加换行，如果依次是同样的元素在一行显示*/
    float:left; /*浮动在左边*/
    margin:10px 2px 0; /*设置外边距上边距10px，右边距2px 下边距0，左边距0*/
    padding:8px; /*内边距*/
    background:url(img/v_bg.gif) no-repeat; /*设置背景图片，只显示一次*/
}
.v_content ul li a { 
    display:block; /*此元素将显示为块级元素，此元素前后会带有换行符。*/
    width:128px; 
    height:80px; 
    overflow:hidden; /*如果溢出元素的内容区域的话,进行裁剪*/
}
/*定义内容区图片的大小为120×96像素*/
.v_content ul li img {  
    width:128px; 
    height:96px; 
}
/*定义内容区标题的样式*/
.v_content ul li h4 { 
    width:128px; /*宽度128px*/
    height:18px; /*高度18px*/
    overflow:hidden; /*如果溢出元素的内容区域的话,进行裁剪*/
    margin-top:12px; /*外上边距12px*/
    font-weight:normal; /*定义字体粗细，默认*/
}
.v_content ul li h4 a { 
    display:inline !important; /* !important 具有优先权提升指定样式规则的应用优先权*/
    height:auto !important; /*高度：自动*/
}
.v_content ul li span { 
    color:#666; /*字体颜色*/
}
.v_content ul li em { 
    color:#888; /*字体颜色*/
    font-family:Verdana; /*字体*/
    font-size:0.9em; /*字体大小*/
}

    </style>

        <script type="text/javascript">
    $(function(){//网页加载时

    var page = 1;//当前版面
    var i = 4; //每版放4个图片


    //向右按钮
    $("span.next").click(function(){//绑定click事件，下一页
        var $parent = $(this).parents("div.v_show");//根据当前点击的元素获取到父元素。
        var $v_show = $parent.find("div.v_content_list");//找到视频内容展示区域
        var $v_content = $parent.find("div.v_content");//找到"视频内容展示区域"外围的div
        var v_width = $v_content.width();//获取区域内容的宽度，带单位

        var len = $v_show.find("li").length;//总的视频图片数

        var page_count = Math.ceil(len / i);//只要不是整数，就往大的方向取最小的整数

        if(!$v_show.is(":animated")){//判断视频内容展示没有处于动画时

        if(page == page_count){
                //已经到最后一个版面了，如果再向后，必须跳转到第一个版面
            $v_show.animate({ left : "0px"} , "slow");
                                //通过改变left值，跳转到第1版面
            page = 1;

        }else{

            $v_show.animate({ left : "-=" + v_width }, "slow");
                                //改变left值，达到每次换一个版面

            page++;

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

        }

    });

    //向左按钮
    $("span.prev").click(function(){//绑定click事件，下一页
        var $parent = $(this).parents("div.v_show");//根据当前点击的元素获取到父元素。
        var $v_show = $parent.find("div.v_content_list");//找到视频内容展示区域
        var $v_content = $parent.find("div.v_content");//找到"视频内容展示区域"外围的div
        var v_width = $v_content.width();//获取区域内容的宽度，带单位

        var len = $v_show.find("li").length;//总的视频图片数

        var page_count = Math.ceil(len / i);//只要不是整数，就往大的方向取最小的整数

        if(!$v_show.is(":animated")){//判断视频内容展示没有处于动画时

        if(page == 1){
                //已经到第一个版面了，如果再向前，必须跳转到最后一个版面
            $v_show.animate({ left : "-="+v_width*(page_count-1)} , "slow");
                                //通过改变left值，跳转到第1版面
            page = page_count;

        }else{

            $v_show.animate({ left : "+=" + v_width }, "slow");
                                //改变left值，达到每次换一个版面

            page--;

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

        }

    });

})

        </script>

  </head>

  <body>
    <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>222,276</em></span>
                    </li>
                    <li>    
                        <a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a>
                        <h4><a href="#">哆啦A梦</a></h4><span>播放：<em>222,276</em></span>
                    </li>
                    <li>    
                        <a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a>
                        <h4><a href="#">哆啦A梦</a></h4><span>播放：<em>222,276</em></span>
                    </li>
                    <li>    
                        <a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a>
                        <h4><a href="#">哆啦A梦</a></h4><span>播放：<em>222,276</em></span>
                    </li>
                    <li>    
                        <a href="#"><img src="img/03.jpg" alt="火影忍者" /></a>
                        <h4><a href="#">火影忍者</a></h4><span>播放：<em>22,276</em></span>
                    </li>
                    <li>    
                        <a href="#"><img src="img/03.jpg" alt="火影忍者" /></a>
                        <h4><a href="#">火影忍者</a></h4><span>播放：<em>22,276</em></span>
                    </li>
                    <li>    
                        <a href="#"><img src="img/03.jpg" alt="火影忍者" /></a>
                        <h4><a href="#">火影忍者</a></h4><span>播放：<em>22,276</em></span>
                    </li>
                    <li>    
                        <a href="#"><img src="img/03.jpg" alt="火影忍者" /></a>
                        <h4><a href="#">火影忍者</a></h4><span>播放：<em>22,276</em></span>
                    </li>
                    <li>    
                        <a href="#"><img src="img/04.jpg" alt="龙珠" /></a>
                        <h4><a href="#">龙珠</a></h4><span>播放：<em>88,276</em></span>
                    </li>
                    <li>    
                        <a href="#"><img src="img/04.jpg" alt="龙珠" /></a>
                        <h4><a href="#">龙珠</a></h4><span>播放：<em>88,276</em></span>
                    </li>
                    <li>    
                        <a href="#"><img src="img/04.jpg" alt="龙珠" /></a>
                        <h4><a href="#">龙珠</a></h4><span>播放：<em>88,276</em></span>
                    </li>
                    <li>    
                        <a href="#"><img src="img/04.jpg" alt="龙珠" /></a>
                        <h4><a href="#">龙珠</a></h4><span>播放：<em>88,276</em></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  </body>
</html>
图片素材