jQuery特效（一）

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 59 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/528859

文章标签：

#javascript #ViewUI

一、隐藏与显示

<!DOCTYPE html>
<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="jquery-1.10.1.min.js"></script>

        <script src="index.js"></script>

        <link type="text/css" rel="stylesheet" href="style.css" />

    </head>

    <body>

        <!--<p>hello</p>

        <button id="hide">隐藏</button>

        <button id="show">显示</button>

        <button id="toggle">隐藏/显示</button>-->

        <script>

            for(var i=0;i<5;i++){

                $("<div>").appendTo(document.body);

            }

            $("div").click(function(){

                $(this).hide(2000,function(){

                    $(this).remove();

                });

            });

        </script>

    </body>
</html>
 
$(document).ready(function(){

    $("#hide").click(function(){

        $("p").hide(1000);

    });

    $("#show").click(function(){

        $("p").show(1000);

    });

    $("#toggle").click(function(){

        $("p").toggle(500);

    });
});
 
div{

    background: aqua;

    width: 50px;

    height: 50px;

    margin: 2px;

    float: left;
}

二、淡入淡出

<!DOCTYPE html>
<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="jquery-1.10.1.min.js"></script>

        <script src="fade.js"></script>

    </head>

    <body>

        <button id="in">fadeIn</button>

        <button id="out">fadeOut</button>

        <button id="toggle">fadeToggle</button>

        <button id="to">fadeTo</button>

        <div id="div1" style="width: 80px;display:none;height: 80px; background-color: aqua;"></div>

        <div id="div2" style="width: 80px;display:none;height: 80px; background-color: #009B86;"></div>

        <div id="div3" style="width: 80px;display:none;height: 80px; background-color: #333333;"></div>

    </body>
</html>
 
$(document).ready(function(){

    $("#in").on("click",function(){

        $("#div1").fadeIn(1000);

        $("#div2").fadeIn(1000);

        $("#div3").fadeIn(1000);

    });

    $("#out").on("click",function(){

        $("#div1").fadeOut(1000);

        $("#div2").fadeOut(1000);

        $("#div3").fadeOut(1000);

    });

    $("#toggle").on("click",function(){

        $("#div1").fadeToggle(1000);

        $("#div2").fadeToggle(1000);

        $("#div3").fadeToggle(1000);

    });

    $("#to").on("click",function(){

        $("#div1").fadeTo(1000,0.5);

        $("#div2").fadeTo(1000,0.7);

        $("#div3").fadeTo(1000,0.3);

    });
});