How to slide a div by hovering over another div with jquery?

Question

I have some code here and cannot find out how to make this work because I am still really new to javascript and jquery. I will have a demo below so you can see what I have going on. In the demo there is div positioned left:-60px so it is hidden, this div also has class of 'show' which positions the div to left:0 There is also the long black box which is another div. I want to make it so when you hover over the long black box, it will activate the 'show' property of the other div. Here is my code:

var $showSidemenu = $('#sidemenu');
var $sidemenuShowButton = $('#sidemenuShowButton');
function(showSidemenu){
 $showSidemenu.onmouseover($sidemenuShowButton).addclass('show');
}

#sidemenuShowButton {
 width:60px;
 height:100%;
 background:#000000;
 top:0;
 left:0;
 position:fixed;
}
#sidemenu {
 width: 60px;
 height:100%;
 background-color: #383D3F;
 position: fixed;
 top: 0;
 left:-60px;
 float: left;
 z-index:0;
}
#sidemenu.show {
 left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidemenuShowButton"></div>
<div id="sidemenu"></div>

• Frank Kluytmans: Do you want a certain animation? Or you just want it to show?
• Kyle_Figueroa: to think of it yeah maybe a slight time out function to go with it

Answer 1

try this jQuery:

var $showSidemenu = $('#sidemenu');
var $sidemenuShowButton = $('#sidemenuShowButton');
$(document).ready(function(){
 $sidemenuShowButton.on('mouseover',function(){
 $('#sidemenu').addClass("show");
 });
 $sidemenuShowButton.on('mouseout',function(){
 $('#sidemenu').removeClass("show");
 });
 // to make the showed div stay while the mouse is still over it
 $('#sidemenu').on('mouseover',function(){
 $(this).addClass("show");
 });
 $('#sidemenu').on('mouseout',function(){
 $(this).removeClass("show");
 });
});

if you want a little animation, you can use CSS3 Transition for that, like this one:

#sidemenu { 
 transition: 1s;
}

HERE'S A WORKING DEMO

Answer 2

Use JQuery's show and hide functions. If you set your #sidemenu to display: none;. And then use this this function it will work:

$('#sidemenu').mouseenter(function(){
 $("#sidemenuShowButton").show();
}).mouseleave(function(){
 $("#sidemenuShowButton").hide();
});

No classes are needed in this way.

• Kyle_Figueroa: I dont want a click function i need a mouseover function
• Roman Bekkiev: classes are a good approach because you can add there css3 animation.

Answer 3

Your JS should looks like this:

var $showSidemenu = $('#sidemenu');
var $sidemenuShowButton = $('#sidemenuShowButton');
$sidemenuShowButton.on('mouseover', function(){
 $showSidemenu.addClass('show')
});

First of all you are using function which never used and cannot be used since it have no name. Second, there is no onmouseover method in jQuery (read the manual ;-). Third you have to pass there a callback function which will be involved when 'mouseover' event occurs.

And if you wanna hide your div when mouse leaves add

$showSidemenu.on('mouseleave', function(){
 $showSidemenu.removeClass('show')
});

You should use $showSidemenu in this case instead of $sidemenuShowButton because when $showSidemenu apears mouse leaves $sidemenuShowButton and enters $showSidemenu. But if you wanna use css3 animation - it's better to make appearing div nested to control div and use event bobbling.

And jsfiddle

Answer 4

Solution:Use mouseover and mouseout events to add and remove class "show"

I have intentionally added mouseout event on showSidemenu as when it slides in it goes over sidemenuShowButton div and comes on top of it, so attaching mouseout to sidemenuShowButton will cause flickering effect.

http://api.jquery.com/category/events/mouse-events/

$sidemenuShowButton.mouseover(function(){
 $showSidemenu.addClass("show");
}
);
$showSidemenu.mouseout(function(){
 $showSidemenu.removeClass("show");
}
);

Working JS Fiddle Example: http://jsfiddle.net/2cjjdm7j/1/