jQuery显示隐藏效果、滑动效果、淡入淡出效果、animate

曾经终败给现在 2023-01-02 14:26 180阅读 0赞

# jQuery效果 #

### 显示隐藏效果 ###

show()、hide()、toggle()

##### show()显示效果 #####

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

参数可以全部省略，无动画直接显示。

speed：三种预定速度（“slow”,“normal”,“fast”）或者表示动画时常的毫秒数值（如：1000）。

easing：用来指定切换效果，默认是"swing",可用参数"linear"。

fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

##### hide()隐藏效果 #####

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

##### toggle()切换，点击隐藏，点击显示 #####

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

##### 案例时刻 #####

点击显示按钮，显示盒子，点击隐藏按钮，隐藏盒子，点击切换按钮，盒子隐藏时显示，显示时隐藏。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动画效果</title>
        <script src="jquery.js"></script>
        <style>
            *{
         
                margin: 0;
                padding: 0;
            }
            div{
         
                width: 300px;
                height: 300px;
                margin-top: 50px;
                background-color: skyblue;
            }
            button{
         
                width: 90px;
            }
        </style>
    </head>
    <body>
        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button>
        <div></div>
        <script>
            $(function() {
         
                $("button").eq(0).click(function(){
         
                    $("div").show("slow");
                })
                $("button").eq(1).click(function(){
         
                    $("div").hide("slow");
                })
                $("button").eq(2).click(function(){
         
                    $("div").toggle("slow");
                })
            })
        </script>
    </body>
    </html>

### 滑动效果 ###

slideDown()下拉效果、slideUp()上拉效果、slideToggle()

##### slideDown() #####

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

##### slideUp() #####

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

##### slideToggle() #####

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

##### 案例时刻 #####

和上面的案例差不多，将函数进行修改就可以看到滑动的效果

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动画效果</title>
        <script src="jquery.js"></script>
        <style>
            *{
         
                margin: 0;
                padding: 0;
            }
            div{
         
                width: 300px;
                height: 300px;
                margin-top: 50px;
                background-color: skyblue;
            }
            button{
         
                width: 90px;
            }
        </style>
    </head>
    <body>
        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button>
        <div></div>
        <script>
            $(function() {
         
                $("button").eq(0).click(function(){
         
                    $("div").slideDown("slow");
                })
                $("button").eq(1).click(function(){
         
                    $("div").slideUp("slow");
                })
                $("button").eq(2).click(function(){
         
                    $("div").slideToggle("slow");
                })
            })
        </script>
    </body>
    </html>

如果鼠标快速连续点击切换按钮，停止之后动画会坚持出现完，这是因为动画之间有排队的效果。如何阻止排第效果呢？可以用到stop()

$(function() {
        
                $("button").eq(0).click(function(){
        
                    $("div").stop().slideDown("slow");
                })
                $("button").eq(1).click(function(){
        
                    $("div").stop().slideUp("slow");
                })
                $("button").eq(2).click(function(){
        
                    $("div").stop().slideToggle("slow");
                })
            })

### 淡入淡出效果 ###

fadeIn()、fadeOut()、fadeToggle()、fadeTo()

##### fadeIn()淡入效果 #####

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

##### fadeOut()淡出效果 #####

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

##### fadeToggle()淡入淡出效果 #####

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

##### fadeTo()修改透明度 #####

fadeTo([[speed],opacity,[easing],[fn]])

opacity透明度必须写，取值0~1之间。

speed也必须写。

### 自定义动画 ###

animate()

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

params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号；如果是复合属性必须采取驼峰命名法。其余参数可以省略。

$(function() {
        
                $("button").eq(3).click(function(){
        
                    $("div").animate({
        
                        left:400,
                        top:500
                    })
                })
            })

在移动left和top时，注意在css中给div加一个定位。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/07f9d8d214ef41ea8c19b79abb7f6467.png