所以：

Question

如果鼠标悬停在不同的div上，我会显示一个div，然后当鼠标离开div时隐藏。

在我的mousemove回调函数中，我说 $('#divToShow').show()，但是我想知道这是否效率低，因为mousemove事件经常被触发，如果已经显示了div，那么它无缘无故地调用show()。

检查div是否隐藏，然后只显示它会更有效吗？像这样：

if ($('#divToShow').is(":hidden")){
  $('#divToShow').show();
}

或者另一个解决方案是在第一次显示div时将布尔变量设置为true，然后在mouseleave上设置为false。

有没有人有关于在mousemove函数中显示div的有效方法的任何信息？

Answer 1

由于您正在使用Jquery，更有效的方法是使用.hover(handlerIn, handlerOut)回调，因此您不必担心创建标记或类似内容。

当鼠标在目标handlerIn上输入时，div只会被触发一次（正如您在console.log('show')电话中看到的那样）。当鼠标离开目标handlerOut时，div也只会被执行一次。

在下面的示例中，当鼠标悬停#div-b时，#div-a内容将可见，当它离开时，内容将被隐藏：

＆＃13;

$(function() {
  $('#div-b').hover(
    function() {
      console.log('show');
      $('#div-a').show();
    },
    function() {
      console.log('hide');
      $('#div-a').hide();
    }
  );
});

＆＃13;

#div-a {
  display: none;
  padding: 20px;
}

.wrapper {
  margin: auto;
  background-color: darkcyan;
  color: white;
  height: 100px;
  margin-bottom: 10px;
}

#div-b {
  padding: 20px;
  height: 50px;
  background-color: black;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="div-a">
    I'm visible!
  </div>

</div>

<div id="div-b">
  Hover me
</div>

＆＃13;

Answer 2

使用mouseEnter设置标志（或只显示），在mouseLeave上将标志设置为相反的值（或者只是隐藏）。 mouseMove可能不是最好的事件，因为它可能会被激发超过预期。如果您只想显示和隐藏元素，您甚至可能无法跟踪标记。

Answer 3

首先，我让你检查source code of $.fn.show，最后，看看我的回答：

show: function() {
        return showHide( this, true );
    }

showHide源代码是：

function showHide( elements, show ) {
    var display, elem, hidden,
        values = [],
        index = 0,
        length = elements.length;

    for ( ; index < length; index++ ) {
        elem = elements[ index ];
        if ( !elem.style ) {
            continue;
        }

        values[ index ] = dataPriv.get( elem, "olddisplay" );
        display = elem.style.display;
        if ( show ) {

            // Reset the inline display of this element to learn if it is
            // being hidden by cascaded rules or not
            if ( !values[ index ] && display === "none" ) {
                elem.style.display = "";
            }

            // Set elements which have been overridden with display: none
            // in a stylesheet to whatever the default browser style is
            // for such an element
            if ( elem.style.display === "" && isHidden( elem ) ) {
                values[ index ] = dataPriv.access(
                    elem,
                    "olddisplay",
                    defaultDisplay( elem.nodeName )
                );
            }
        } else {
            hidden = isHidden( elem );

            if ( display !== "none" || !hidden ) {
                dataPriv.set(
                    elem,
                    "olddisplay",
                    hidden ? display : jQuery.css( elem, "display" )
                );
            }
        }
    }

    // Set the display of most of the elements in a second loop
    // to avoid the constant reflow
    for ( index = 0; index < length; index++ ) {
        elem = elements[ index ];
        if ( !elem.style ) {
            continue;
        }
        if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
            elem.style.display = show ? values[ index ] || "" : "none";
        }
    }

    return elements;
}

所以：

您不需要检查它是否隐藏$().is(':hidden')，因为它已在show函数中检查过（请参阅：if ( elem.style.display === "" && isHidden( elem ) ) { ....）

Answer 4

更好的解决方案是使用下面的代码段mouseEnter和mouseLeave：

这是在javaScript中，但会给你一个更好的主意。如果你想在JQuery中使用它并遇到问题，我可以在Pluncker上为你编写它。希望这会有所帮助

    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>

更新

function show() {
  $("#deletebutton").show();
}

function hide() {
  $("#deletebutton").hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>      
<div onmouseover="show()" onmouseout="hide()">
      // image 
        <div class="myclass" id="deletebutton" style="display:none;">DELETE</div>
</div>

Answer 5

您不能使用.hover()和.toggle()功能吗？是mousemove必须吗？

https://jsfiddle.net/tvwpdxum/1/

显示隐藏的jQuery

5 个答案:

所以：

更新