jQuery核心对象——动画

最新推荐文章于 2023-06-25 20:51:27 发布

_洋

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量710

点赞数

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

本文链接：https://blog.csdn.net/mantou_riji/article/details/124543116

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

文章目录

基本动画效果
滑动效果
淡入淡出
自定义动画
设置

基本动画效果

show([speed,[easing],[fn]])：显示隐藏的匹配元素。
hide([speed,[easing],[fn]])：隐藏显示的元素
toggle([speed],[easing],[fn])：如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

显示隐藏，默认没有动画，如果设置时间就会有动画，动画通opacity/height/width的改变实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>淡入淡出</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <button id='btn1'>立即显示</button>
    <button id='btn2'>慢慢显示</button>
    <button id='btn3'>慢慢隐藏</button>
    <button id='btn4'>隐藏显示切换</button>
    <br>
    <div class="div1">

    </div>
    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
        var $div1 = $('.div1')
        $('#btn1').click(function  (){
            $div1.show()
        })
        $('#btn2').click(function  (){
           $div1.show(3000)
        })
        $('#btn3').click(function  (){
           $div1.hide(3000)
        })
        $('#btn4').click(function  (){
           $div1.toggle()
        })
    </script>
    
</body>
</html>

滑动效果

slideDown([speed],[easing],[fn])：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
slideUp([speed,[easing],[fn]])：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
slideToggle([speed],[easing],[fn])：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>淡入淡出</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <button id='btn1'>慢慢收缩</button>
    <button id='btn2'>慢慢展开</button>
    <button id='btn3'>收缩展开切换</button>
    <br>
    <div class="div1">

    </div>
    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
        var $div1 = $('.div1')
        $('#btn1').click(function  (){
            $div1.slideUp()
        })
        $('#btn2').click(function  (){
           $div1.slideDown(3000)
        })
        $('#btn3').click(function  (){
           $div1.slideToggle()
        })
    </script>
    
</body>
</html>

淡入淡出

fadeIn([speed],[easing],[fn])：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeOut([speed],[easing],[fn])：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
fadeToggle([speed,[easing],[fn]])：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>淡入淡出</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <button id='btn1'>慢慢淡出</button>
    <button id='btn2'>慢慢淡入</button>
    <button id='btn3'>淡入淡出切换</button>
    <br>
    <div class="div1">

    </div>
    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
        var $div1 = $('.div1')
        $('#btn1').click(function  (){
        //    $div1.fadeOut("slow")
        // 可以设置回调函数
        $div1.fadeOut("slow",function (){
           alert("淡出完成")
        })
        })
        $('#btn2').click(function  (){
           $div1.fadeIn()
        })
        $('#btn3').click(function  (){
           $div1.fadeToggle()
        })
    </script>
    
</body>
</html>

自定义动画

animate(params,[speed],[easing],[fn])：用于创建自定义动画的函数。
stop([clearQueue],[jumpToEnd])：停止所有在指定元素上正在运行的动画。
delay(duration,[queueName])：设置一个延时来推迟执行队列中之后的项目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义动画</title>
    <style>
        .div1{
            position:absolute;
            width: 100px;
            height: 100px;
            top: 50px;
            left: 300px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <button id="btn1">逐渐扩大</button>
    <button id="btn2">移动到指定位置</button>
    <button id="btn3">移动指定距离</button>
    <button id="btn4">停止动画</button>
    <div class="div1">
        HelloWorld!
    </div>

    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
        var $div1 =$('.div1')
        // 1．逐渐扩大
        // 1)．宽/高都扩为200px
        // $('#btn1').click(function (){
        //    $div1.animate({
        //        width:200,
        //        height:200
        //    },3000)
        // })
         // 2)．宽先扩为280px,高后扩为200px
        $('#btn1').click(function (){
           $div1
           .animate({
               width:200
           },3000)
           .animate({
               height:200
           })
        })


        // 2．移动到指定位置
        $('#btn2').click(function (){
        // 1).移动到(500, 100)处
        //   $div1.animate({
        //       left:500,
        //       top:100
        //   },1000) 

        // 2).移动到(100,20)处
         $div1.animate({
              left:100,
              top:20
          },1000) 
        })


        // 3.移动指定的距离
        $('#btn3').click(function (){
        // 1)．移动距离为(100, 50)
        // $div1.animate({
        //     left:'+=100',
        //     top:'+=50'
        // })
        // 2)．移动距离为(-100,-20)
            $div1.animate({
            left:'-=100',
            top:'-=20'
        },3000)
        })

        // 4.停止动画
        $('#btn4').click(function (){
           $div1.stop()
        })
    </script>
</body>
</html>

应用：导航菜单的下拉，收缩

$( #navigation>ul>li:has(u1)' ).hover(function () {/动画展开
$(this).children( 'ul').stop().slideDown()}, function (){
/动画收缩
$(this).children( 'ul' ).stop().slideUp()})