jQuery动画效果---隐藏/显示，淡入淡出，滑动，动画

最新推荐文章于 2024-04-05 13:18:03 发布

I_am_shy

最新推荐文章于 2024-04-05 13:18:03 发布

阅读量786

点赞数 11

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/I_am_shy/article/details/136536472

版权

本文详细介绍了如何使用jQuery库实现元素的隐藏/显示、淡入淡出、滑动以及自定义动画效果，包括语法、速度参数和回调函数的使用。还展示了如何停止正在运行的动画。

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

jquery可以实现很多流畅的动画效果

1.隐藏/显示

语法规则：

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

$(selector).hide(speed,callback);//使元素隐藏

$(selector).show(speed,callback);//使元素显示

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
$(selector).toggle(speed,callback);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery隐藏和显示</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #666;
            margin: 20px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <button class="bt1">1.隐藏/显示</button>
    <button class="bt2">2.隐藏/显示</button>
</body>
<script src="js.js"></script>
</html>

---js部分---

$(document).ready(function(){
    let show = true;//默认不隐藏
    $(".bt1").click(function () { 
        if(show){
            $(".box").hide(1000,function () { 
                show = false;
                console.log("隐藏了")
            });
        }else if(!show){
            $(".box").show(1000,function () {  
                show = true;
                console.log("显示了")
            });
            
        }
    });
    //以下效果和上方一致
    $(".bt2").click(function () { 
        $(".box").toggle(1000);
    });
})

运行结果如下

2.淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

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

语法规则

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

$(selector).fadeIn(speed,callback);//淡入

$(selector).fadeOut(speed,callback);//淡出

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
$(selector).fadeToggle(speed,callback);

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(selector).fadeTo(speed,opacity,callback);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery淡入淡出</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #666;
            margin: 20px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <button class="bt1">淡出</button>
    <button class="bt2">淡入</button>
    <button class="bt3">淡入淡出</button>
    <button class="bt4">透明度</button>
</body>
<script src="jquery.js"></script>
</html>

---js部分---

$(function () { 
    $(".bt1").click(function () { 
        $(".box").fadeOut(1000);
    });
    $(".bt2").click(function () { 
        $(".box").fadeIn(1000);
    });
    $(".bt3").click(function () { 
        $(".box").fadeToggle(1000);
    });
    $(".bt4").click(function () { 
        $(".box").fadeTo(1000,0.2);
    });
})

3.滑动

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);


jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery滑动</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .title ,.box{
            width: 500px;
            border: 2px solid rgb(255, 106, 0);
            background-color: rgb(255, 166, 103);
        }
        .title{
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
        }
        .box{
            text-indent: 20px;/*段落缩进*/
        }
    </style>
</head>
<body>
    <div class="title">滑动特效</div>
    <div class="box">
        jQuery 是一个 JavaScript 函数库。
        jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。<br>
        jQuery 库包含以下功能：
            HTML 元素选取<br>
            HTML 元素操作<br>
            CSS 操作<br>
            HTML 事件函数<br>
            JavaScript 特效和动画<br>
            HTML DOM 遍历和修改<br>
            AJAX<br>
            Utilities<br>
    </div>
    <button class="bt1">滑出</button>
    <button class="bt2">滑入</button>
</body>
<script src="jquery.js"></script>
</html>

---js部分---

$(document).ready(function () {
    $(".bt1").click(function () { 
        $(".box").slideDown(1000);  
    });
    $(".bt2").click(function () { 
        $(".box").slideUp(1000);
    });
    $(".title").click(function () { 
        $(".box").slideToggle(1000);
    });
});

4.动画

jQuery animate() 方法用于创建自定义动画，和css动画类似（线性变化属性），将属性对象写入即可，可以用 animate() 方法来操作所有几乎所有的CSS 属性

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery动画</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .box{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #666;
            color: #eee;
        }
    </style>
</head>
<body>
    <div class="box">点击展示动画</div>
</body>
<script src="jquery.js"></script>
</html>

---js部分---

$(document).ready(function () {
    $(".box").click(function (e) { 
        //可以出现多个动画，每个动画可以出现多个属性，可以用 animate() 方法来操作所有 几乎所有的CSS 属性
        $(".box").animate({
            left : "500px",
            opacity : "0.4"
        },2000);
        $(".box").animate({
            left : "0px",
            opacity : "1"
        },2000);
    });
});

停止动画

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery动画</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .box{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #666;
            color: #eee;
        }
        .control{
            top: 200px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box">点击展示动画</div>
    <div class="control">
        <button class="bt1">停止当前的动画</button>
        <button class="bt2">停止所有的动画</button>
        <button class="bt3">停止当前的动画，并完成当前动画</button>
        <button class="bt3">停止所有的动画，并完成当前动画</button>
    </div>
</body>
<script src="jquery.js"></script>
</html>

---js部分---

$(document).ready(function () {
    $(".box").click(function (e) { 
        //可以出现多个动画（动画队列），每个动画可以出现多个属性，可以用 animate() 方法来操作所有 几乎所有的CSS 属性
        $(".box").animate({
            left : "500px",
            opacity : "0.4"
        },2000);
        $(".box").animate({
            left : "0px",
            opacity : "1"
        },2000);
    });
    $(".bt1").click(function (e) { 
        $(".box").stop(false);//参数1，默认为false，仅停止当前执行的一个动画，之后继续执行动画队列的后续动画
    });
    $(".bt2").click(function (e) { 
        $(".box").stop(true);//停止所有动画
    });
    $(".bt3").click(function (e) { 
        $(".box").stop(false,true);//参数2，立刻执行完当前动画（结束变化过程）
    });
    $(".bt4").click(function (e) { 
        $(".box").stop(true,true);//停止所有动画，立刻执行完当前动画（结束变化过程）
    });
});

注：实测第3，4个按钮并没有区别

5.callback和链

Callback 函数在当前动画效果100% 完成之后执行。

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jqueryCallback和链</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .box{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #666;
            color: #eee;
        }
    </style>
</head>
<body>
    <div class="box">点击展示动画</div>
</body>
<script src="jquery.js"></script>
</html>

---js部分---

$(document).ready(function () {
    $(".box").click(function (e) { 
        // //可以出现多个动画，每个动画可以出现多个属性，可以用 animate() 方法来操作所有 几乎所有的CSS 属性
        // //动画1
        // $(".box").animate({
        //     left : "500px",
        //     opacity : "0.4"
        // },2000,function () {  //callback函数
        //     console.log("动画1完成了");
        // });
        // //动画2
        // $(".box").animate({
        //     left : "0px",
        //     opacity : "1"
        // },2000,function () {  
        //     console.log("动画2完成了");
        // });
        
        //以上动画可以通过'链'简化，效果一致
        //动画链
        $(".box").animate({
            left : "500px",
            opacity : "0.4"
        },2000,function () {  //callback函数
            console.log("动画1完成了");
        }).animate({
            left : "0px",
            opacity : "1"
        },2000,function () {  
            console.log("动画2完成了");
        });
    });
});