JQuery创建动画效果的方法

最新推荐文章于 2023-08-10 16:36:12 发布

星灭233

最新推荐文章于 2023-08-10 16:36:12 发布

阅读量521

点赞数

分类专栏： jQuery 文章标签： js jquery 前端

本文链接：https://blog.csdn.net/ksx2333/article/details/115407168

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

前言

都是针对被选择的元素
使用方法：$(".div").方法(加或不加时间)
这里列举了常用的11个方法

1 淡入淡出

淡入淡出不断改变元素的透明来实现的
fadeIn() 带动画的显示（逐渐改变被选元素的不透明度，从隐藏到可见）
fadeOut() 带动画的隐藏（逐渐改变被选元素的不透明度，从可见到隐藏）
fadeToggle() 当动画的切换显示/隐藏（在 fadeIn() 和 fadeOut() 方法之间进行切换）

2 滑动

滑动动画
slideDown() 带动画的展开（通过调整高度来滑动显示被选元素）
slideUp() 带动画的收缩（通过调整高度来滑动隐藏被选元素）
slideToggle() 带动画的切换展开/收缩（ slideUp() 和 slideDown() 方法之间的切换）

3 显示隐藏

显示隐藏默认(指不带时间)是没有动画
show() (不)带动画的显示
hide() (不)带动画的隐藏
toggle() (不)带动画的显示/隐藏

4 自定义动画

JQuery动画的本质在指定时间内不断的改变元素的样式来实现的
animate() 自定义动画效果
stop() 停止动画

5 完整代码/实现页面

5.1 完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/jquery-1.10.1.js"></script>
<style>
    .div1 {
        width: 200px;
        height: 200px;
        background: red;
    }
    button{
        height: 30px;
        width: 163px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    button:hover{
        background-color: red;
    }
</style>

<body>
    <button id="btn1">慢慢淡出</button>
    <button id="btn2">慢慢淡入</button>
    <button id="btn3">慢慢切换（淡出/淡入）</button><br>
    <button id="btn4">慢慢收缩</button>
    <button id="btn5">慢慢展开</button>
    <button id="btn6">慢慢切换（收缩展开）</button><br>
    <button id="btn7">瞬间显示</button>
    <button id="btn8">慢慢显示</button>
    <button id="btn9">慢慢隐藏</button>
    <button id="btn10">慢慢切换（显示/隐藏）</button><br>
    <button id="btn11">（自定义动画）慢慢变大</button>
    <button id="btn12">停止动画</button>
    <button id="btn13">自定义动画</button>
    <div class="div1">
    </div>
    <script>
        $(function () {
            //淡入淡出
            $("#btn1").click(function () {//慢慢消失（淡出）
                $(".div1").fadeOut(2000)//2000毫秒
            })
            $("#btn2").click(function () {//慢慢出现（淡入）
                $(".div1").fadeIn(2000)//2000毫秒
            })
            $("#btn3").click(function () {//淡入淡出切换
                $(".div1").fadeToggle(2000)//2000毫秒
            })
            //收缩展开
            $("#btn4").click(function () {
                $(".div1").slideUp(2000)//收缩
                // $(".div1").css({//单纯的css没法用动画
                //     height:100
                // },2000)
            })
            $("#btn5").click(function () {//展开
                $(".div1").slideDown(2000)
            })
            $("#btn6").click(function () {//收缩展开切换
                $(".div1").slideToggle(2000)
            })
            //显示隐藏
            $("#btn7").click(function () {
                $(".div1").show()
            })
            $("#btn8").click(function () {
                $(".div1").show(1000)
            })
            $("#btn9").click(function () {
                $(".div1").hide(1000)
            })
            $("#btn10").click(function () {
                $(".div1").toggle(1000)
            })
            //自定义动画
            $("#btn11").click(function () {
                $(".div1").animate({
                    height: 500,
                    width: 500,
                }, 2000)
            })
            $("#btn12").click(function () {
                //无参数的情况 立即停止当前动画 执行下一个动画
                //$(".div1").stop()
                //立即停止当前动画 并清空动画队列
                //什么是动画队列?  连续动画动作 连续触发多次向右 [左,右,左]
                //$(".div1").stop(true,false)
                //立即停止当前动画 并且到这次动画的目的地 继续执行下一动画
                $(".div1").stop(false, true)
            })
            //自定义动画
            $("#btn13").click(function () {
                $(".div1").animate({ height: 500 }, "slow");
                $(".div1").animate({ width: 500 }, "slow");
                $(".div1").animate({ height: 200 }, "slow");
                $(".div1").animate({ width: 200 }, "slow");
            });

        })
    </script>
</body>

</html>

5.2 实现页面：

在这里插入图片描述

星灭233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery创建动画效果的方法

JQuery的11个常用的动画效果方法（fadeIn()、fadeOut()、fadeToggle()、slideDown()、slideUp()、slideToggle()、show()、hide() 、toggle()、animate()、stop()。）
复制链接

扫一扫