jQuery中的基本动画类型

最新推荐文章于 2023-12-06 18:09:22 发布

这是一个对象

最新推荐文章于 2023-12-06 18:09:22 发布

阅读量93

点赞数

文章标签： html html5 前端

本文链接：https://blog.csdn.net/m0_67576744/article/details/126273358

版权

一、显示与隐藏

1、shou()显示

2、hiden()隐藏

3、toggle()切换显示和隐藏

实现原理是给标签加行内样式display:none，括号内可传参(可选)，有五个参数，分别为:

1，normal：正常

2，slow：慢

3，fast：快

4:，毫秒数

5，回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            /* display: none; */
        }
    </style>
</head>
<body>
    <button class="btn">点吧</button>
    <div id="ha">蛤铪铪</div>
</body>
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $('.btn').click(function() {
        console.log(66);
        // $('#ha').hiden(2000)     //隐藏
        // $('#ha').toggle()   //显示
        $('#ha').toggle('slow')   //点击切换隐藏和显示
    })
</script>
</html>

二、折叠动画（卷曲效果）

1、折叠向上

2、折叠向下

3、切换折叠向上向下

实现原理是给标签加行内样式display:none，修改标签的高度值，括号内可传参(可选)，有五个参数，分别为:

1，normal：正常

2，slow：慢

3，fast：快

4:，毫秒数

5，回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button class="btn">点吧</button>
    <div id="ha">蛤铪铪</div>
</body>
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $('.btn').click(function() {
        console.log(66);
        // $('#ha').slideUp(2000)     //隐藏
        // $('#ha').slideDown()   //显示
        $('#ha').slideToggle('slow')   //点击切换隐藏和显示
    })
</script>
</html>

三、淡入淡出

1、fadein：淡入

2、dadeout：淡出

3、fadetoggle：切换淡入淡出

实现原理是给标签加行内样式display:none，修改标签透明度opacity，括号内可传参(可选)，有五个参数，分别为:

1，normal：正常

2，slow：慢

3，fast：快

4:，毫秒数

5，回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button class="btn">点吧</button>
    <div id="ha">蛤铪铪</div>
</body>
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $('.btn').click(function() {
        console.log(66);
        // $('#ha').fadein(2000)     //淡入
        // $('#ha').fadeout()   //淡出
        $('#ha').fadeToggle(50000)   //点击切换淡入和淡出
    })
</script>
</html>

四、自定义动画

注意：自定义动画可以过渡的样式都是数值类型

1、animate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button class="btn">点吧</button>
    <div id="ha">蛤铪铪</div>
</body>
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 语法animate({样式:样式值},参数或毫秒数，回调函数)
    $('.btn').click(function() {
        $('#ha').animate({
            width :'50px',
            height :'50px'
        },'slow',function() {
            console.log('蛤铪'); //回调函数动画执行完后执行
        })
    })
</script>
</html>

这是一个对象

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的基本动画类型

注意：自定义动画可以过渡的样式都是数值类型。3、fadetoggle：切换淡入淡出。3、toggle()切换显示和隐藏。二、折叠动画（卷曲效果）2、dadeout：淡出。2、hiden()隐藏。1，normal：正常。1，normal：正常。1、fadein：淡入。1，normal：正常。1、shou()显示。3、切换折叠向上向下。...
复制链接

扫一扫