39-jQuery显示和隐藏动画

最新推荐文章于 2024-03-10 18:19:17 发布

杨亚仑

最新推荐文章于 2024-03-10 18:19:17 发布

阅读量305

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery入门练习

本文链接：https://blog.youkuaiyun.com/yangyalun/article/details/83384593

jQuery入门练习专栏收录该内容

60 篇文章

订阅专栏

本文深入讲解了jQuery中show、hide和toggle三种动画方法的使用，通过实例演示如何设置动画时间和回调函数，帮助读者掌握基本的jQuery动画操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

感想：jQuery支持show()、hide()、toggle()三种动画方法，并且有两个参数，第一个是时间，第二个是执行完毕的回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>39-jQuery显示和隐藏动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
            display: none;
        }
    </style>
    <script src="JS_file/jquery-1.12.4.js"></script>
    <script>
         $(function () {
                 //    编写jQuery相关代码
             $("button").eq(0).click(function () {
                 // $("div").css("display","block")
                 $("div").show(1000,function () {
                 //    作用：动画执行完毕之后调用
                     alert("显示动画执行完毕");
                 });
             });
             $("button").eq(1).click(function () {
                 // $("div").css("display","none");
                 $("div").hide(1000,function () {
                     //    作用：动画执行完毕之后调用
                     alert("隐藏动画执行完毕")
                 });
             });
             $("button").eq(2).click(function () {
                $("div").toggle(1000,function () {
                    alert("切换完毕")
                });
             });
         })

    </script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>