Hi everyone, just a quick question about syntax.

What's the difference between the following functions?

1. $("#menu li").hover(
         function(event) {
             if ($(this).is(".active")) return;
             
             $(this).addClass("hover").stop().animate(
             {
                 marginTop: '-30px'
             }, 500); // animation here
             
         }, function(event) {
             if ($(this).is(".active")) return;
             $(this).removeClass("hover").stop().animate(
             {
                 marginTop: '0px'
             }, 500); // animation here
         })
         .click((function() {
         var active;
         return function(event) {
           if (active) active.removeClass("active");
           active = $(this).addClass("active").removeClass("hover");
           var new_content = $(this).find('a').attr('target');
           if (contactActive) {
             $('#'+btn_content).hide(20, function () {
                 $('.s_content').slideDown(200);
                 contactActive = false;
             });
           }
           $('#'+activeContent).hide(20, function () {
              $('#'+new_content).show(200);
              $('div.activeBar').css('background-color', '#5367b0');
           });
           activeContent = $(this).find('a').attr('target');
           return false;
         }
           })());
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

And

1. $('.preview img').hover(
           function () {
               // animation goes here
               //console.log("moused over "+$(this).attr('alt'));
               imgWidth = $(this).width();
               imgHeight = $(this).height();
               $(this).css({'z-index' : '10'});
               $(this).addClass("hover").stop().animate({
                       marginTop: '-10px',
                       marginLeft: '-10px',
                       top: '50%',
                       left: '50%',
                       width: imgWidth * 1.5,
                       height: imgHeight * 1.5,
                       padding: '0px'
               }, 200);
           },
           function () {
               $(this).removeClass("hover").stop().animate({
                   marginTop: '0',
                   marginLeft: '0',
                   top: '0',
                   left: '0',
                   width: imgWidth,
                   height: imgHeight,
                   padding: '0px'
               }, 100);
           }
       )
       .click(function () {
           // Set target variable for close function
           btn_content = 'imageHolder';
           // Set the image source
           $('#imageHolder img:first').attr({src: "/images/" + $(this).attr('target') + ".png"});
           // Hide the content div and show the image
           $('.s_content').hide(20, function () {
               $('#imageHolder').show(200);
           });
           contactActive = true;
       });
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

If you notice, at the end of the first hover function, there is an excess (), whereas on the second, there isn't. They are both functional. I was just curious as to why this is added sometimes and other times not.

Thanks,

Eugene "Eggers"