显示隐藏的jQuery

Question

I have a div that I show if the mouse is hovering over a different div, then when the mouse leaves the div is hidden.

In my mousemove callback function I say $('#divToShow').show() , however I'm wondering if this is inefficient as mousemove events are fired very frequently, and if that div is already shown then it's calling show() for no reason.

Would it be more efficient to check if the div is hidden, and only show it then? Like this:

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

Or another solution would be to have a boolean variable that is set to true the first time the div is shown, then set to false on mouseleave .

Does anyone have any information on an efficient way to show a div in a mousemove function?

Answer 1

Since you're using Jquery, a more efficient way to do what you want is using a .hover(handlerIn, handlerOut) callback, so you don't need to worry about creating a flag or something like that.

The handlerIn will be triggered only one time, when the mouse enter on the target div (as you can see on the console.log('show') call). The handlerOut will also be executed only one time, when the mouse leaves the target div .

On the example below, when the mouse hover #div-b the #div-a content will be visible and when it leaves, the content will be hidden:

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

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

 <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> 

Answer 2

Use mouseEnter to set a flag (or just show) and on mouseLeave set the flag to the opposite value (or just hide). mouseMove may not be best event since it may be fired more than desired. You may not even keep track of a flag if you just want to show and hide an element.

Answer 3

First of All , i let you inspect source code of $.fn.show , then , see , at the end , my answer :

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

And showHide source code is :

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

---

So :

You don't need to check if it is hidden or not $().is(':hidden') because it is already checked in show function (See : if ( elem.style.display === "" && isHidden( elem ) ) { .... )

Answer 4

A better solution would be to use a mouseEnter and mouseLeave like this snippet below:

This is in javaScript but will give you a better idea. If you want it in JQuery and having problems with it I can write it on Pluncker for you. Hope this will help

  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> 

---

Updated

 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

Can't you use .hover() and .toggle() functions? is mousemove must?

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