jQuery动画

jquery动画：动画效果，有基本动画显示和隐藏、滑动、淡入淡出、自定义动画

1.1 显示和隐藏

show([speed,[easing],[fn]])

显示隐藏的匹配元素。

hide([speed,[easing],[fn]])

隐藏显示的元素

注意参数分析：

speed速度

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

我们把 速度 写到 show() 和 hide() 方法里， 动画切换的时候，有过渡效果，比较好看。

 .box {
            width: 300px;
            height: 300px;
            background-color: red;
            margin-bottom: 20px;
            display: none;
        }

 <div class="box"></div>
    <button id="btn1">显示</button>
    <button id="btn2">隐藏</button>

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            $('#btn1').click(function(){
                $('.box').show(250);
            })
            $('#btn2').click(function(){
                $('.box').hide(250)
            })
        })
    </script>

预览：

1.2 滑动

slideUp([speed,[easing],[fn]])  向上滑动

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

slideDown([speed,[easing],[fn]])  向下滑动

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

优化图的显示效果：

我们让 图 包裹在 一个div盒子中，就可以实现 在滑动的时候，只是 高度在变！！！

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .ad{
            width: 1190px;
            height: 100px;
            margin:0 auto;
            position: relative;
        }
        .top{
            width: 100%;;
            height: 100px;
            background-color: #f54c23;
        }
        .close{
            font-size:16px;
            color:#fff;
            background-color: rgba(0,0,0,0.3);
            width: 20px;
            text-align: center;
            line-height: 20px;
            position:absolute;
            top:0;
            right:0;
            cursor: pointer;

        }
    </style>

 

 <div class="top">
    <div class="ad">
        <img src="./img/ad1.png" alt="">
       
    </div>
</div>
<div class="close">×</div>

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //定义开关
            //注意：开关定义在事件的外面！
            // 解决的方法是：我们要使用 流程控制开关，在一开 一关，各自的动作中，做各自的事情。
            var flag=true;
            $('.close').click(function(){
           
            if(flag==true){
                $('.top').slideUp();
                flag=false;
                console.log('关闭');
               
            }else{
                $('.top').slideDown();
                flag=true;
                console.log('显示');
               

            }

            })
               
        })
    </script>

 预览：

滑动切换

slideToggle()

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .ad{
            width: 1190px;
            height: 100px;
            margin:0 auto;
            position: relative;
        }
        .top{
            width: 100%;;
            height: 100px;
            background-color: #f54c23;
        }
        .close{
            font-size:16px;
            color:#fff;
            background-color: rgba(0,0,0,0.3);
            width: 20px;
            text-align: center;
            line-height: 20px;
            position:absolute;
            top:0;
            right:0;
            cursor: pointer;

        }
    </style>

 

 <div class="top">
    <div class="ad">
        <img src="./img/ad1.png" alt="">
       
    </div>
</div>
<div class="close">×</div>

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
           
         
            $('.close').click(function(){
           
                $('.top').slideToggle()

            })
               
        })
    </script>

 

效果如上图相同

1.3 淡入淡出

fadeIn([speed],[easing],[fn])

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

fadeOut([speed],[easing],[fn])

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

<style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            margin-bottom: 20px;
            display: none;
        }
    </style>

<div class="box"></div>
    <button id="btn1">淡入</button>
    <button id="btn2">淡出</button>

 

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            $('#btn1').click(function(){
                $('.box').fadeIn()

            })
            $('#btn2').click(function(){
                $('.box').fadeOut()
            })
        })
    </script>

预览：

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

<style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            margin-bottom: 20px;
            display: none;
        }
    </style>

 

<div class="box"></div>
    <button id="btn1">淡入</button>
    <button id="btn2">淡出</button>

 

 <script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            $('#btn1').click(function(){
                $('.box').fadeIn(1000)

            })
            $('#btn2').click(function(){
                $('.box').fadeOut(1000)
            })
        })
    </script>

预览：

切换淡入淡出

fadeToggle([speed,[easing],[fn]])

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

  $(function(){
            $('#btn1').click(function(){
                $('.box').fadeToggle(2500)

            })
        })

预览：

1.4 自定义动画

animate(params,[speed],[easing],[fn])

用于创建自定义动画的函数。

点击按钮后div元素的几个不同属性一同变化

<style>
        #block{
            border: 1px solid blue;
            width: 300px;
        }
    </style>

 

<button id="go"> Run</button>
    <br><br>
    <div id="block">Hello!</div>

 

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //animate()自定义动画函数
            $('#go').click(function(){
                $('#block').animate({
                    width:'500px',
                    height:'200px',
                    fontSize:'20px',
                    borderWidth:'20px'
                },1000)
            })
           
        })
    </script>

 预览：