jQuery_效果(淡入淡出)

时间：2023-03-09 21:50:27
jQuery_效果(淡入淡出)

1、jQuery fadeIn() 方法（ 用于淡入已隐藏的元素。）

语法：

$(selector).fadeIn(speed,callback);

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("button").click(function(){
            $("#div1").fadeIn();
            $("#div2").fadeIn("slow");
            $("#div3").fadeIn(3000);
          });
    });
</script>
</head>
<body>
    <button>点击这里，使三个矩形淡入</button><br><br>

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

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

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

2、jQuery fadeOut() 方法（用于淡出可见元素）

语法：

$(selector).fadeOut(speed,callback);

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("button").click(function(){
            $("#div1").fadeOut();
            $("#div2").fadeOut("slow");
            $("#div3").fadeOut(3000);
          });
    });
</script>
</head>
<body>
    <button>点击这里，使三个矩形淡出</button><br><br>

    <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>

    <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>

    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>

3、jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：$(selector).fadeToggle(speed,callback);

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("button").click(function(){
            $("#div1").fadeToggle();
            $("#div2").fadeToggle("slow");
            $("#div3").fadeToggle(3000);
          });
    });
</script>
</head>
<body>
    <button>点击这里，使三个矩形淡入淡出</button><br><br>

    <div id="div1" style="width:80px; height:80px; background-color:red;"></div><br>

    <div id="div2" style="width:80px; height:80px; background-color:green;"></div><br>

    <div id="div3" style="width:80px; height:80px; background-color:blue;"></div>
</body>

4、jQuery fadeTo() 方法（允许渐变为给定的不透明度（值介于 0 与 1 之间））

语法：$(selector).fadeTo(speed,opacity,callback);

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

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("button").click(function(){
            $("#div1").fadeTo("slow",0.1);
            $("#div2").fadeTo("slow",0.5);
            $("#div3").fadeTo("slow",0.9);
          });
    });
</script>
</head>
<body>
    <button>点击这里，使三个矩形淡出</button><br><br>

    <div id="div1" style="width:80px; height:80px; background-color:red;"></div><br>

    <div id="div2" style="width:80px; height:80px; background-color:green;"></div><br>

    <div id="div3" style="width:80px; height:80px; background-color:blue;"></div>
</body>

相关文章