20-淡入淡出动画

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换">

<div></div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>

<script type="text/javascript">
    
    $(function(){
        $('input').eq(0).click(function(){
            $('div').fadeIn(3000)
        })
        
        $('input').eq(1).click(function(){
            $('div').fadeOut(3000)
        })
        
        $('input').eq(2).click(function(){
            $('div').fadeToggle()
        })
    })
</script>

</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容