jquery的淡入淡出效果

转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50618244
本文出自【我是干勾鱼的博客】

jquery中使用fadeOut() 实现淡出效果,隐藏一个元素;使用fadeIn()实现淡入效果,显示一个元素:

<html>
<head>
<script type="text/javascript" src="/test/jquery-1.12.0.js"></script>
<script type="text/javascript"> $(document).ready(function(){ $(".bb1").click(function(){ $("div").fadeOut() }); $(".bb2").click(function(){ $("div").fadeIn(); }); }); </script>
</head>
<body>
    <div>欢迎观临!</div>
    <button class="bb1">hide</button>
    <button class="bb2">show</button>
</body>
</html>

初始显示:

这里写图片描述

点击隐藏:

这里写图片描述

点击显示:

这里写图片描述

淡入淡出效果很明显,比普通的显示和隐藏要友好!

你可能感兴趣的:(JavaScript,js,jquery,淡入,淡出)