Question

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

HTML

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

// image 

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

</div>

JS

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';
    }
}

Answer 1

如果您可以使用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

Answer 2

使用fadeIn()和function show_hide(id) { var e = $("#"+id); if(e.is(":visible")) { console.log("if") e.fadeOut(500); } else { console.log("else") e.fadeIn(500); } }方法

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div onmouseover="show_hide('deletebutton')">
   <div id="deletebutton" style="display:none">DELETE</div>
</div>

{{1}}

Answer 3

没有JQUERY

如果你不想使用jquery，你应该使用 display display 。

<强> HTML

<div id="container" onmouseover="show_hide('deletebutton')" onmouseout="show_hide('deletebutton')">
<div id="deletebutton" style="opacity:0">DELETE</div>
</div>

<强> JS

*function show_hide(x) {

     var e = document.getElementById(x);
     if(e.style.opacity=="0")
     e.style.opacity="1";
     else
      e.style.opacity="0";

}*

CSS - 淡出

#deletebutton{
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

jsfiddle

Answer 4

多种方式实现此目的，您可以使用以下任何一种方法：

的JavaScript
JQuery的
CSS3 animantions
自举

使用CSS3动画将是使用CSS3最简单，最有效的方法。使用 JQuery ，您可以使用FadeIn()或FadeOut()。此外，您可以使用addClass()或removeClass()

我将从CSS3和JavaScript（你的方式）给你两个例子。作为JQuery的例子已经由@Jayesh

展示

使用CSS3

    .myclass {
        opacity: 0;
        margin-top: 25px;
        font-size: 21px;
        text-align: center;
        -webkit-transition: opacity 1s ease-in;
        -moz-transition: opacity 1s ease-in;
        -o-transition: opacity 1s ease-in;
        -ms-transition: opacity 1s ease-in;
        transition: opacity 1s ease-in;
    }
    .mainclass:hover > .myclass  { opacity: 1 }

<div class="mainclass">
// image 
  <div class="myclass ">DELETE</div>
</div>

使用JavaScript

    function show_hide(id) {
        var e = document.getElementById(id);
        if (e == null){
        } else {
        if (!e.classList.contains('showClass'))
                e.className += " showClass";
                else
                e.className = "myclass";
       }
    }

.myclass {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    -ms-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
.showClass{ opacity: 1 }

<div onmouseover="show_hide('deletebutton')" onmouseout="show_hide('deletebutton')">
// image 
  <div class="myclass" id="deletebutton">DELETE</div>
</div>

希望这会有所帮助。谢谢。

如何将fadeIn添加到我的show_hide（）函数中？

4 个答案:

使用CSS3

使用JavaScript