16 - 动画合集（显示隐藏，展开收起，淡入淡出，自定义）

最新推荐文章于 2022-03-01 20:24:58 发布

Devin·Finn

最新推荐文章于 2022-03-01 20:24:58 发布

阅读量533

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/DanBo_C/article/details/100626898

版权

jQuery 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

显示，隐藏

显示$("div").show(1000, function () {});
隐藏$("div").hide(1000, function () {});
切换$("div").toggle(1000, function () {});

示例代码：

	<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>

展开，收起

显示$("div").slideDown(1000, function () {});
隐藏$("div").slideUp(1000, function () {});
切换$("div").slideToggle(1000, function () {});

示例代码：

	<script>
        $(function () {
            // 编写jQuery相关代码
        $("button").eq(0).click(function () {
            $("div").slideDown(1000, function () {
                alert("展开完毕");
            });
        });
        $("button").eq(1).click(function () {
            $("div").slideUp(1000, function () {
                alert("收起完毕");
            });
        });
        $("button").eq(2).click(function () {
            $("div").slideToggle(1000, function () {
                alert("收起完毕");
            });
        });
        });
    </script>

淡入淡出

淡入$("div").slideDown(1000, function () {});
淡出$("div").slideUp(1000, function () {});
切换$("div").slideToggle(1000, function () {});
淡入到$("div").fadeTo(1000, function () {});

示例代码：

	<script>
        $(function () {
            // 编写jQuery相关代码
            $("button").eq(0).click(function () {
                $("div").fadeIn(1000, function () {
                    alert("淡入完毕");
                });
            });
            $("button").eq(1).click(function () {
                $("div").fadeOut(1000, function () {
                    alert("淡出完毕");
                });
            });
            $("button").eq(2).click(function () {
                $("div").fadeToggle(1000, function () {
                    alert("切换完毕");
                });
            });
            $("button").eq(3).click(function () {
                $("div").fadeTo(1000, 0.2, function () {
                    alert("淡入完毕");
                })
            });
        });
    </script>

自定义动画

第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数

操作属性

				$(".two").animate({
                    marginLeft: 500
                }, 5000, "linear", function () {
                    // alert("自定义动画执行完毕");
                });

累加属性

				$(".one").animate({
                    width: "+=100"
                }, 1000, function () {
                    alert("自定义动画执行完毕");
                });

关键字

				$(".one").animate({
                    // width: "hide"隐藏
                    // width: "show"显示
                    width: "toggle"切换
                }, 1000, function () {
                    alert("自定义动画执行完毕");
                });