您的位置：首页 > Web前端 > JQuery

jquery的淡入淡出效果

2016-02-01 14:04 603 查看
转载请注明出处：/article/3643444.html

本文出自【我是干勾鱼的博客】

jquery中使用fadeOut() 实现淡出效果，隐藏一个元素；使用fadeIn()实现淡入效果，显示一个元素：

[code]<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>


初始显示：



点击隐藏：



点击显示：



淡入淡出效果很明显，比普通的显示和隐藏要友好！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航