jQuery动画

九阈

于 2022-06-30 12:55:24 发布

阅读量212

点赞数

分类专栏： # jQuery 文章标签：动画 jquery javascript

原文链接：https://blog.csdn.net/wuyxinu/article/details/103669718#t18

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本文介绍了jQuery中基本动画的使用，如`show()`、`hide()`、`toggle()`、滑入滑出`slideDown()`、`slideUp()`和`slideToggle()`，以及动画队列、stop()方法、淡入淡出效果`fadeIn()`、`fadeOut()`和`fadeToggle()`，并展示了自定义动画和实际应用案例，如下拉菜单、音乐导航和360开关机动画。

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

基本动画

    /*注意：动画的本质是改变容器的大小和透明度*/
    /*注意：如果不传参数是看不到动画*/
    /*注意：可传入特殊的字符  fast normal slow*/
    /*注意：可传入数字 单位毫秒*/
    /*1.展示动画*/
    $('li').show();
    /*2.隐藏动画*/
    $('li').hide();
    /*3.切换展示和隐藏*/
    $('li').toggle();

请添加图片描述

滑入滑出

    /*注意：动画的本质是改变容器的高度*/
    /*1.滑入动画*/
    $('li').slideDown();
    /*2.滑出动画*/
    $('li').slideUp();
    /*3.切换滑入滑出*/
    $('li').slideToggle();

请添加图片描述

对应案例：案例-《下拉菜单2》
在这里插入图片描述

动画队列

    /*
    jQuery中有个动画队列的机制。
    当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，  
    等前面的动画完成后再开始执行。
    可是用户的操作往往都比动画快，  
    如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，
    影响到效果。
    */

stop使用

    /*1.停止当前动画  如果动画队列当中还有动画立即执行*/
    //$('div').stop();
    /*2.和stop()效果一致  说明这是默认设置*/
    //$('div').stop(false,false);
    /*3.停止当前动画  清除动画队列*/
    //$('div').stop(true,false);
    /*4.停止当前动画并且到结束位置  清除了动画队列*/
    //$('div').stop(true,true);
    /*5.停止当前动画并且到结束位置  如果动画队列当中还有动画立即执行*/
    $('div').stop(false,true);

对应案例：案例-《音乐导航》
对应案例：案例-《工具栏》

淡入淡出

    /*注意：动画的本质是改变容器的透明度*/
    /*1.淡入动画*/
    $('li').fadeIn();
    /*2.淡出动画*/
    $('li').fadeOut();
    /*3.切换淡入淡出*/
    $('li').fadeToggle();
    $('li').fadeTo('speed','opacity');

请添加图片描述
对应案例：案例-《淡入淡出》
【案例：突出展示】
在这里插入图片描述

自定义动画

    /*
    * 自定义动画
    * 参数1：需要做动画的属性
    * 参数2：需要执行动画的总时长
    * 参数3：执行动画的时候的速度
    * 参数4：执行动画完成之后的回调函数
    * */
    $('#box1').animate({left:800},5000);
    $('#box2').animate({left:800},5000,'linear');
    $('#box3').animate({left:800},5000,'swing',function () {
        console.log('动画执行完成');
    });

请添加图片描述
对应案例：案例-《360开关机动画》
在这里插入图片描述

滑入滑出—下拉菜单2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(images/bg.jpg);
        }

        .wrap li{
            background-image: url(images/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //需求: 给一级菜单的li标签设置鼠标移入事件，二级菜单ul显示。
    //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。


    //鼠标移入事件.
    $('.wrap>ul>li').mouseenter(function () {
      //$(this).children('ul').css('display','block');
      //简写
      $(this).children('ul').stop(true,false).slideDown(300);
    });

    //鼠标移出事件.
    $('.wrap>ul>li').mouseleave(function () {
      //$(this).find('ul').css('display','none');
      //简写
      $(this).find('ul').stop(true,false).slideUp(150);
    });



  });
</script>

淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
            display: none;
        }
    </style>
</head>
<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                 //1.淡入 fadeIn
                 $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function(){
                 //2.淡出 fadeOut
                 $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function(){
                 //3.切换 fadeToggle
                 $("div").fadeToggle(1000);
            })
            $("button").eq(3).click(function(){
                 //4.淡入到那里 fadeTo
                 //修改透明度fadeTo()这个速度和透明度要必须写
                 $("div").fadeTo(1000,0.5);
            });
        });
    </script>
</body>
</html>

淡入淡出—突出展示

请添加图片描述

自定义动画—360开关机动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 322px;
            position: fixed;
            bottom: 0;
            right: 0;
            overflow: hidden;
        }

        span {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="box" id="box">
    <span id="closeButton"></span>
    <div class="hd" id="headPart">
        <img src="images/t.jpg" alt=""/>
    </div>
    <div class="bd" id="bottomPart">
        <img src="images/b.jpg" alt=""/>
    </div>
</div>

</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
      //1.给关闭按钮一个点击事件.
      $('#closeButton').click(function () {
          //2.让下面那部分的高度动画变为0.
          $('#bottomPart').animate({
              height:0
          },500, function () {
              //3.让整个大盒子的宽度动画变为0
              $('#box').animate({
                  width:0
              },1000);
          });
      });

  });
</script>

手风琴

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style-type: none;
        }

        .parentWrap {
            width: 200px;
            text-align: center;

        }

        .menuGroup {
            border: 1px solid #999;
            background-color: #e0ecff;
        }

        .groupTitle {
            display: block;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }

        .menuGroup > div {
            height: 200px;
            background-color: #fff;
            display: none;
        }

    </style>
</head>
<body>
    <ul class="parentWrap">
        <li class="menuGroup">
            <span class="groupTitle">标题1</span>
            <div>我是弹出来的div1</div>
        </li>

        <li class="menuGroup">
            <span class="groupTitle">标题2</span>
            <div>我是弹出来的div2</div>
        </li>

        <li class="menuGroup">
            <span class="groupTitle">标题3</span>
            <div>我是弹出来的div3</div>
        </li>

        <li class="menuGroup">
            <span class="groupTitle">标题4</span>
            <div>我是弹出来的div4</div>
        </li>
    </ul>

</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        //需求:点击标题li标签,对应的div显示, 他的兄弟标签li下面的div隐藏.
        $('.parentWrap>.menuGroup').click(function () {
            //jQuery特性:隐式迭代
            //jQuery特性:链式编程,在于一个方法返回的是一个jQuery对象,既然是jQueyr对象就可以继续点出jQuery的方法来.
            $(this).children('div').show().parent().siblings('li').children('div').hide();
        });

    });
</script>