CODEWITHSUNDEEP
javascriptjqueryhtmlcss
avocadowarrior
avocadowarrior

Reputation: 97

DIV appear/disappear on mouse enter/leave

I'm trying to make a navigation using jQuery. I'm very new to jQuery so I'm getting a bit stuck here.

Basically what I'm trying to do is have testbutton2 appear and hide when I mouse over/off testbutton1. I was able to get this to work with mouseenter/leave.

The part I'm trying to add is to keep testbutton2 visible when I have the mouse over testbutton2 and to keep testbutton2 visible if I cursor back onto testbutton1 - so only fade in or out once.

You'll see from my code exactly what I encountered and probably have a chuckle.

CSS

#testbutton1 {
float:left;
height:100px;
width:100px;
background:#69C;
}

#testbutton2 {
float:left;
height:100px;
width:100px;
background:#0C6;
display:none;
}

HTML

<div id="testbutton1"></div>
<div id="testbutton2"></div>

jQuery

$("#testbutton1").on({
     mouseenter: function() {
         $("#testbutton2").fadeIn();
     },
     mouseleave: function() {
         $("#testbutton2").fadeOut();
     },

});
$("#testbutton2").on({
     mouseenter: function() {
         $("#testbutton2").fadeIn();
     },
     mouseleave: function() {
         $("#testbutton2").fadeOut();
     },

});

JSFiddle

DEMO

Upvotes: 3

Views: 1985

Answers (4)

flup
flup

Reputation: 27104

Or you can do it in pure css. Wrap both buttons in a larger div and show the second button only while the mouse hovers over the larger div:

<div id="buttons">
    <div id="testbutton1"></div>
    <div id="testbutton2"></div>
</div>

#buttons:hover div {
    display:block;
}

http://jsfiddle.net/r267b/1/

Upvotes: 2

peter_the_oak
peter_the_oak

Reputation: 3710

I suggest to use status variables that stores if you are hovering over button1 or over button2. 

var isOver1 = false;
var isOver2 = false;

Then, add conditions to mouseleave and mouseenter in order to set hide or to alter the status variables, e.g.:

 mouseleave: function() {
         isOver1 = false;
         window.setTimeout( function() {
             if (!isOver2) {
                 isOver2 = false;
                 $("#testbutton2").fadeOut();
             } 
         }, 50);

The timeout is necessary because if you leave testbutton1, you are not entering testbutton2 at exact the same time. So waiting a bit allows to fire the testbutton2 enter event.

Here is the full demo:

http://jsfiddle.net/KTULJ/2/

Leaving button1 to button2 keeps button2, leaving back to button1 still keeps button2, leaving any button towards the space around hides button2.

With this approach, you don't need to stop an animation as it doesn't start one if it is not necessary.

Upvotes: 1

danikaze
danikaze

Reputation: 1654

This is solved with timers, as Arun P Johny said...

But as far as I saw, what you want to do is a menu. Have you thought about using jQuery UI menu widget?

http://jqueryui.com/menu/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You can do something like

$("#testbutton1").on({
    mouseenter: function () {
        $("#testbutton2").fadeIn();
    },
    mouseleave: function () {
        var $target = $("#testbutton2");

        //delay the fade out to see whether the mouse is moved to the second button
        var timer = setTimeout(function () {
            $target.stop(true, true).fadeOut();
        }, 200);
        $target.data('hoverTimer', timer);
    }
});
$("#testbutton2").on({
    mouseenter: function () {
        //if mouse is moved inside then clear the timer so that it will not get hidden
        clearTimeout($(this).data('hoverTimer'));
        $(this).stop(true, true).fadeIn();
    },
    mouseleave: function () {
        $(this).stop(true, true).fadeOut();
    }
});

Demo: Fiddle

Upvotes: 1

Related Questions