jQuery淡入淡出效果

通过 jQuery,您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

这里还是强烈推荐使用fadeToggle()方法,可以实现切换。与弹出的

方法一样,其也有参数。

$(selector).fadeToggle(speed,callback);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").fadeToggle();
                $("#div2").fadeToggle(1000);
                $("#div3").fadeToggle(1600);
            })
        })
    </script>
</head>
<body>
<button>begin</button>
<br>
<div id="div1" style="width: 80px;height: 80px;background-color: red">

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

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

</div>
</body>
</html>

fadeTo()方法:允许渐变为给定的不透明度(值介于0到1)

0表示透明,1表示不透明。

$(selector).fadeTo(speed,opacity,callback);

猜你喜欢

转载自blog.csdn.net/weixin_41060905/article/details/82418278