javascript - 如何在我的show hide()函数中添加“淡入”？

我有一个功能。当您将div悬停时，它会显示一个删除按钮，而当鼠标移出时，它会隐藏它。现在，我只需要在我的show_hide函数中添加fadeIn即可，而不是直接显示。我怎样才能做到这一点？

HTML

<div onmouseover="show_hide('deletebutton')" onmouseout="show_hide('deletebutton')">

// image

<div id="deletebutton" style="display:none">DELETE</div>

</div>

function show_hide(id) {
    var e = document.getElementById(id);
            if (e == null){
    } else {
    if (e.style.display == 'block')
            e.style.display = 'none';
            else
            e.style.display = 'block';
    }
}

最佳答案

如果可以使用jQuery，请尝试以下示例。

看到这个plunker

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeIn demo</title>
  <style>
  span {
    color: red;
    cursor: pointer;
  }
  div {
    margin: 3px;
    width: 80px;
    display: none;
    height: 80px;
    float: left;
  }
  #one {
    background: #f00;
  }
  #two {
    background: #0f0;
  }
  #three {
    background: #00f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

<script>
$( document.body ).click(function() {
  $( "div:hidden:first" ).fadeIn( "slow" );
});
</script>

</body>
</html>

source