Function to show/hide a menu on hover

Posted on

Problem

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

});

Solution

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *