JQuery基础动画效果

最新推荐文章于 2024-02-14 08:29:54 发布

Warmsake_

最新推荐文章于 2024-02-14 08:29:54 发布

阅读量68

点赞数

文章标签： jquery javascript 动画

本文链接：https://blog.csdn.net/weixin_61006312/article/details/127840671

版权

jQuery animate() 方法用于创建自定义动画。

语法：


$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

显示隐藏动画

隐藏 hide()

显示 show()

显示/隐藏 toggle(

例：

 $("#testhide").click(function() {
                // 动画效果
                $("#first").hide("slow");
            });
            $("#testshow").click(function() {
                // 动画效果
                $("#first").show("slow");
            });

效果：

显示上滑下滑动画

例：

   $("#testslideup").click(function() {
                // 动画效果
                $("#first").slideUp("slow");
            });
            $("#testslidedown").click(function() {
                // 动画效果
                $("#first").slideDown("slow");
            });
            $("#testslidetoggle").click(function() {
                // 动画效果
                $("#first").slideToggle("slow");
            });

效果：

显示淡入淡出动画

例：

    $("#testfadein").click(function() {
                // 动画效果
                $("#first").fadeIn("slow");
            });
            $("#testfadeout").click(function() {
                // 动画效果
                $("#first").fadeOut("slow");
            });
            $("#testfadetoggle").click(function() {
                // 动画效果
                $("#first").fadeToggle("slow");
            });
            $("#testanimate").click(function() {
                // 动画效果
                $("#first").animate({
                    fontSize: "12px"
                }, "slow");
            });

效果：