How can this function to show/hide a menu on hover be improved?

Question

(function($){

  $.fn.showMenu = function(options){

    return this.each(function(){

      $this = $(this);
      var high         = $this.outerHeight(),
          scrollHeight = $this.get(0).scrollHeight;

      $this.bind('mouseenter',function(){
        $this.css({overflow:'visible'})
             .stop()
             .animate({height:scrollHeight},'fast');
      }).bind('mouseleave',function(){
        $this.animate({height:high}, function(){
          $this.css({overflow:'hidden'});
        });
      });
    });

  }//the end of $.fn.showMenu

  $('#theme_content').showMenu();

});

how can I make this code snippet be improved to become more professional?

Answer 1

You could also use .hover, if you are going for shorter code. Jquery Hover

Answer 2

1. Proper Indentation. You shouldn't need the //end of fn comment. Just indent that entire block.

2. $this = $(this) needs a var statement.

3. You wrap your code in a function, which is good, but you need to call that function. The last line should be })();