Function to show/hide a menu on hover

Question

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

(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();
});

• ANeves: Have you considered using CSS animations instead?

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 })();