I've made a simple drawer using CSS3 and jQuery that works with hover and click. It seems to be working fine but surely there's a simpler way of writing the code.
Fiddle: http://jsfiddle.net/73MpU/
$("#bottom-page").click(function () {
$("#top-page").addClass("push");
});
$("#bottom-page").mouseover(function () {
$("#top-page").addClass("nudge-right");
});
$("#bottom-page").mouseleave(function () {
$("#top-page").removeClass("nudge-right");
});
$("#top-page").click(function () {
$(this).removeClass("push");
$(this).removeClass("nudge-left");
});
$("#top-page").mouseover(function () {
if ($(this).hasClass("push")) {
$(this).addClass("nudge-left");
}
});
$("#top-page").mouseleave(function () {
if ($(this).hasClass("push")) {
$(this).removeClass("nudge-left");
}
});
So, I simplified my code a bit. Is this valid?
Edit:
$("#bottom-page").hover(function () {
$("#top-page:not(.push)").toggleClass("nudge-right");
});
$("#bottom-page").click(function () {
$("#top-page:not(.push)").removeClass("nudge-right");
$("#top-page:not(.push)").addClass("push");
});
$("#top-page").hover(function () {
if ($(this).hasClass("push")) {
$(this).toggleClass("nudge-left");
}
});
$("#top-page").click(function () {
if ($(this).hasClass("push")) {
$(this).removeClass("push nudge-left");
}
});