jquery动画

最新推荐文章于 2023-05-17 22:08:06 发布

no_name_sky

最新推荐文章于 2023-05-17 22:08:06 发布

阅读量79

点赞数

分类专栏： js jquery 文章标签： jquery

本文链接：https://blog.csdn.net/no_name_sky/article/details/118435481

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

基本动画

$('div').show();无参数，表示让指定的元素直接显示出来。
$('div').show(3000);通过控制元素的宽高、透明度、display属性逐渐显示。
$('div').show("slow"); 和方式二一样。参数可以是slow,normal,fast。
#('div').show(5000, function(){alert("动画执行完毕");}); 动画执行完毕立即执行回调函数
上述时间控制都是毫秒为单位的。
显示动画：show()
隐藏动画：hide()
开关式显示隐藏动画：toggle()
三者的参数设置都是一样的。
关闭动画：stop()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <style>
        .box{
            width:200px;
            height:200px;
            background-color:red;
            display:none;
        }
    </style>
</head>
<body>
<button id="show">显示动画</button>
<button id="hide">隐藏动画</button>
<button id="toggle">开关式动画</button>
<div class="box"></div>

<script>
    $(function(){
        $('#show').click(function(){
            // $('.box').show();
            $('.box').show(3000);
        });

        $('#hide').click(function(){
            // 默认 normal 400ms; slow 600ms; fast 200ms;
            $('.box').hide('slow');
        });

        // 开关式显示隐藏动画
        $('#toggle').click(function(){
            // 玩动画就和玩定时器一样， 先关动画再开动画。
            $('.box').stop().toggle(2000);
        })
    })
</script>
</body>
</html>

卷帘门动画

也叫滑入滑出动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <style>
        .box{
            width:200px;
            height:200px;
            background-color:red;
            display:none;
        }
    </style>
</head>
<body>
<button id="slideDown">滑入</button>
<button id="slidUp">滑出</button>
<button id="toggleSlide">开关式动画</button>
<div class="box"></div>

<script>
    $(function(){
        $('#slideDown').click(function(){
            // 使用方法和show hide一模一样，就是方法名不一样
            $('.box').slideDown(3000);
        });

        $('#slidUp').click(function(){
            // 默认 normal 400ms; slow 600ms; fast 200ms;
            $('.box').slideUp('slow');
        });

        // 开关式显示隐藏动画
        $('#toggleSlide').click(function(){
            $('.box').stop().slideToggle(2000);
        })
    })
</script>
</body>
</html>

淡入淡出动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <style>
        .box{
            width:200px;
            height:200px;
            background-color:red;
            display:none;
        }
    </style>
</head>
<body>
<button id="fadeIn">淡入</button>
<button id="fadeOut">淡出</button>
<button id="fadeToggle">开关式动画</button>
<div class="box"></div>

<script>
    $(function(){
        $('#fadeIn').click(function(){
            // 使用方法和show hide一模一样，就是方法名不一样
            $('.box').fadeIn(3000);
        });

        $('#fadeOut').click(function(){
            // 默认 normal 400ms; slow 600ms; fast 200ms;
            $('.box').fadeOut('slow');
        });

        // 开关式显示隐藏动画
        $('#fadeToggle').click(function(){
            $('.box').stop().fadeToggle(2000);
        })
    })
</script>
</body>
</html>

自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color:red;
            position:absolute;
            bottom:0;
            left:0;
        }
    </style>
</head>
<body>

<div class="box"></div>
<button>动画</button>
<script>
    $(function(){
        $('button').click(function(){
            // animate(队列的属性,时间,回调函数)
            var json= {
                width:"500",
                height:"500",
                top:10,
                left:1000,
                "border-radius":200,
            }
            var json2 = {
                width:0,
                height:0,
                top:10,
                left:1000,
            }
            // 放入的队列值，表示从多少时间内，这些值由原来的变成队列中的值，来达成动画效果。
            $('.box').stop().animate(json, 1000, function(){

                $('.box').stop().animate(json2, 1000, function(){
                    alert('已添加购物车')
                })
            });
        });
    })
</script>
</body>
</html>

no_name_sky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery动画

基本动画$('div').show();无参数，表示让指定的元素直接显示出来。$('div').show(3000);通过控制元素的宽高、透明度、display属性逐渐显示。$('div').show("slow"); 和方式二一样。参数可以是slow,normal,fast。#('div').show(5000, function(){alert("动画执行完毕");}); 动画执行完毕立即执行回调函数上述时间控制都是毫秒为单位的。显示动画：show()隐藏动画：hide()开关式显示隐
复制链接

扫一扫