Use hover
. The first function will take action on hover and the second when you hover out. See example
$("#slidingpanel").hover(function(e){
$(this).animate({
width: 200
},100);
},function(e){
$(this).animate({
width: 30
},100);
});
If you want to close your div on click only you can try this:
$("#slidingpanel").hover(function(e){
$(this).animate({
width: 200
},100);
$("#closeButton").css("display", "inline-block");
});
$("#closeButton").click(function(){
$("#slidingpanel").animate({
width: 30
},100);
$(this).css("display", "none").delay(200);
});
I located the X outside because if it's inside once you clicked it and moved the mouse, the hover will be fired again.