常用jQuery动画效果

常用jQuery动画效果汇总

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

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

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

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

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

接下来进行css样式和html基本布局：

 <style>
        #content #first {
            color: white;
            background-color: rgb(9, 92, 247);
            width: 240px;
            height: 100px;
            margin: 10px 0 0 0;
            padding: 10px;
            border-radius: 5px;
        }
    </style>

 <div id="content">
        <input id="testhide" type="button" value="隐藏">
        <input id="testshow" type="button" value="显示">
        <input id="testtoggle" type="button" value="隐藏/显示">
        <input id="testslideup" type="button" value="上滑隐藏">
        <input id="testslidedown" type="button" value="下滑显示">
        <input id="testslidetoggle" type="button" value="上/下滑显示">
        <input id="testfadein" type="button" value="淡入显示">
        <input id="testfadeout" type="button" value="淡出显示">
        <input id="testfadetoggle" type="button" value="淡入/出显示">
        <input id="testanimate" type="button" value="自定义显示">
        <div id="first">
            学习的敌人是自己的满足，要认真学习一点东西，必须从不自满开始。对自己，“学而不厌”，对人家，“诲人不倦”，我们应取这种态度。——伟大的领袖
        </div>
    </div>

jQuery隐藏显示动画特效：

 

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

jQuery隐藏显示集合框动画特效：

 $("#testtoggle").click(function() {
                // 动画效果
                $("#first").toggle("slow");
            });

jQuery上滑下滑动画特效：

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

 jQuery淡入淡出自定义动画特效：

    $("#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");
            });