Question

I’m trying to mimic the new Gmail menu-collapse style. So when a menu is very long (over a certain height in pixels) I want to collapse it to a predetermined height. When the exposed menu area is hovered over, I want to expand the menu to the original menu height. When leaving the area again, reduce the height to the predetermined… rinse and repeat. This is the jQuery I have so far:

/**
 * @author Les Peabody
 */
(function ($) {
    $(document).ready(function () {
        $(".collapsible").css('height','200px');
        $(".collapsible").mouseenter(function () {
            $(".collapsible").animate({
                height: '400px'
            },300, function () {

            });
            });
        $(".collapsible").mouseleave(function () {
            $(".collapsible").animate({
                height: '200px'
            },300, function () {

            });
        });
    });
})(jQuery);

Essentially what I’m doing is any element with the class “collapsible” is assigned this functionality. The problem I’m running into is I don’t know how to go about restoring the original height of the affected menu. Any tips?

EDIT: Following the tips received from the accepted answer below, I now have this code that is working.

$(".collapsible").mouseenter(function () {
    $(this).switchClass("constrained","unconstrained",300);
    return false;
});
$(".collapsible").mouseleave(function () {
    $(this).switchClass("unconstrained","constrained",300);
    return false;
});

Answer 1

If you are going to just make style differences, I would limit the JQuery to remove/add a class constrained and set the styles in CSS.

#menu.constrained {
  max-height: 200px;
  ...
}

Even better, you could skip JQuery altogether by targeting #menu:hover ... instead of #menu.constrained ...!

People overuse JQuery.

---

inb4 animations: there are CSS animations, and they can even tap into advanced system resources like graphic acceleration.