8.自定义动画①淡入淡出切换fadeIn、~Out、~Toggle②滑动slideDown、~Up、~Toggle③显示show隐藏hide切换toggle④通用动画animate（）⑤停stop（）

最新推荐文章于 2022-09-09 14:15:38 发布

美美| ू•ૅω•́)ᵎᵎᵎ

最新推荐文章于 2022-09-09 14:15:38 发布

阅读量389

点赞数

分类专栏： jQuery 文章标签：动画 html html5

本文链接：https://blog.csdn.net/lazylYYY/article/details/120106942

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一：淡入淡出切换：不断改变元素的透明度来实现的参数毫秒

1.fadeIn():带动画的显示

2.fadeOut():带动画的显示

3.fadeToggle():带动画的显示/隐藏

二：滑动（从上到下出现）参数毫秒

1. slideDown(): 带动画的展开

2. slideUp(): 带动画的收缩

3. slideToggle(): 带动画的切换展开/收缩

三：显示与隐藏（从左上角到右下角出现）如果不传递参数毫秒，默认是没有任何过渡效果的，瞬间出现

1. show(): (不)带动画的显示

2. hide(): (不)带动画的隐藏

3. toggle(): (不)带动画的切换显示/隐藏

四：动画案例：自己增加宽高，自己移动

1. animate({要改变的样式（对象的形式宽高）}，过渡时间不写默认3秒) : 自定义的动画方法

2. stop(): 停止动画

3.stop().animate()：先停止当前动画，直接进行下一动画

一：淡入淡出切换：不断改变元素的透明度来实现的参数毫秒

1.fadeIn():带动画的显示

2.fadeOut():带动画的显示

3.fadeToggle():带动画的显示/隐藏

<style>
    .div1 {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>

<body>
    <button id="btn1">慢慢淡出</button>
    <button id="btn2">慢慢淡入</button>
    <button id="btn3">淡出/淡入切换</button></button>
    <div class="div1"></div>

    <!-- 淡入淡出：不断改变元素的透明度来实现的 参数毫秒
          1.fadeIn():带动画的显示
          2.fadeOut():带动画的显示
          3.fadeToggle():带动画的显示/隐藏
    -->
    <script src="js/jquery-1.10.1.js"></script>
    <script>
        $('#btn1').on('click', function () {
            $('.div1').fadeOut(2000)
        })
        $('#btn2').on('click', function () {
            $('.div1').fadeIn(2000)
        })
        $('#btn3').on('click', function () {
            $('.div1').fadeToggle(2000)
        })
    </script>
</body>

二：滑动（从上到下出现）参数毫秒

1. slideDown(): 带动画的展开

2. slideUp(): 带动画的收缩

3. slideToggle(): 带动画的切换展开/收缩

<style type="text/css">
    * {
        margin: 0px;
    }

    .div1 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50px;
        left: 10px;
        background: red;
    }
</style>

<body>
    <button id="btn1">慢慢收缩</button>
    <button id="btn2">慢慢展开</button>
    <button id="btn3">收缩/展开切换</button>

    <div class="div1">
    </div>

    <!--
       滑动动画 参数毫秒
       1. slideDown(): 带动画的展开
       2. slideUp(): 带动画的收缩
       3. slideToggle(): 带动画的切换展开/收缩
-->
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script type="text/javascript">
        $('#btn1').click(function () {
            $('.div1').slideUp(2000);
        })
        $('#btn2').click(function () {
            $('.div1').slideDown(2000)
        })
        $('#btn3').click(function () {
            $('.div1').slideToggle(2000)
        })
    </script>
</body>

三：显示与隐藏（从左上角到右下角出现）如果不传递参数毫秒，默认是没有任何过渡效果的，瞬间出现

1. show(): (不)带动画的显示

2. hide(): (不)带动画的隐藏

3. toggle(): (不)带动画的切换显示/隐藏

<style type="text/css">
    * {
        margin: 0px;
    }

    .div1 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50px;
        left: 10px;
        background: red;
        display: none;
    }
</style>

<body>
    <button id="btn1">瞬间显示</button>
    <button id="btn2">慢慢显示</button>
    <button id="btn3">慢慢隐藏</button>
    <button id="btn4">显示隐藏切换</button>

    <div class="div1">
    </div>

    <!--
         显示隐藏， show和hide方法 如果不传递时间  默认是没有任何过渡效果的
         沿对角线过渡
         1. show(): (不)带动画的显示
         2. hide(): (不)带动画的隐藏
         3. toggle(): (不)带动画的切换显示/隐藏
    -->
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script type="text/javascript">
        $('#btn1').click(function () {
            $('.div1').show();
        })
        $('#btn2').click(function () {
            $('.div1').show(2000);
        })
        $('#btn3').click(function () {
            $('.div1').hide(2000)
        })
        $('#btn4').click(function () {
            $('.div1').toggle(2000)
        })
    </script>
</body>

四：动画案例：自己增加宽高，自己移动

1. animate({要改变的样式（对象的形式宽高）}，过渡时间不写默认3秒) : 自定义的动画方法

2. stop(): 停止动画

3.stop().animate()：先停止当前动画，直接进行下一动画

<style type="text/css">
    * {
        margin: 0px;
    }

    .div1 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50px;
        left: 300px;
        background: red;
        color: #fff;
    }
</style>

<body>
    <button id="btn1">逐渐扩大</button>
    <button id="btn2">向右移动</button>
    <button id="btn3">向左移动</button>
    <button id="btn4">停止动画</button>

    <div class="div1">
        animate(): 自定义动画方法，两个参数 参数1：要改变的样式（对象的形式） 参数2：过渡时间，不写默认3秒
        stop(): 停止动画
    </div>

    <!--
jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
1. animate(): 自定义动画方法，两个参数 参数1：要改变的样式（对象的形式宽高）  参数2：过渡时间，不写默认3秒
2. stop(): 停止动画

-->
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //1.先宽度扩大后高度扩大
            $('#btn1').click(function () {
                $('.div1').animate({
                    'width': '300px'
                }, 1000).animate({
                    'height': '300px'
                }, 1000)
            })
            //2.向右移动：基于当前位置向右移动 200px
            // stop()清除上一个动画，直接开始下一个
            $('#btn2').click(function () {
                $('.div1').stop().animate({
                    'left': '+=200'
                }, 2000)
            })

            //3.向左移动：基于当前位置向右移动 200px
            $('#btn3').click(function () {
                $('.div1').stop().animate({
                    'left': '-=200'
                }, 2000)
            })
            //停止动画
            $('#btn4').click(function () {
                //  第一个参数：是否清空动画队列     
                //  第二个参数：当前动画是否执行到目的地
                //  $('.div1').stop(fales,false);//立即停止当前动画  在当前的位置执行下一个动画  不清空动画队列
                //  $('.div1').stop(false,true);//立即停止当前动画  直接跳到动画结束的状态   不清空动画队列
                //  $('.div1').stop(true,false);//立即停止当前动画  清空动画队列  直接在当前位置停止动画
                $('.div1').stop(true, true);//立即停止当前动画 直接跳到动画结束状态  清空动画队列
            })


        });

    </script>
</body>

美美| ू•ૅω•́)ᵎᵎᵎ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.自定义动画①淡入淡出切换fadeIn、~Out、~Toggle②滑动slideDown、~Up、~Toggle③显示show隐藏hide切换toggle④通用动画animate（）⑤停stop（）

目录一：淡入淡出切换：不断改变元素的透明度来实现的参数毫秒1.fadeIn():带动画的显示2.fadeOut():带动画的显示3.fadeToggle():带动画的显示/隐藏二：滑动（从上到下出现）参数毫秒1.slideDown():带动画的展开2.slideUp():带动画的收缩3.slideToggle():带动画的切换展开/收缩三：显示与隐藏（从左上角到右下角出现）如果不传递参数毫秒，默认是没有任何过渡效果的，瞬间出现1.show...
复制链接

扫一扫