Javascript syntax?

JavaScript
1

Hi all

I’m having really problems trying to understand this simple piece of code here.


$('#fader').hover(function() {

  $(this).find('img:eq(1)').stop(true,true).fadeIn();

}, function() {

  $(this).find('img:eq(1)').fadeOut();

})

My problem is with the rightbrace on the third line },

Where does this come from? , Where’s it’s corresponding leftbrace {

I’m normal use code like


function FunctionName(){
 // function

}

I know Javascript works more like


$('#fader').hover(function() {
 // function

})
2

Let’s look at the signature for the [URL=“http://api.jquery.com/hover/”]jQuery.hover method- then we’ll expand it from there.

The signature:

hover(functionForMouseOver(e), functionForMouseOut(e));

So what we’re doing here is passing the jQuery.hover method 2 anonymous functions that are going to handle the mouseEnter and mouseLeave events. (Because, after all - jQuery.hover is only a shorthand to bind handler functions to those events.)

Let’s expand that:

$("#selector").hover(function() { /* mouseenter event handler */ }, function() { /* mouseleave event handler */ });

Of course - once we format the code:

$("#selector").hover(function() { 
  /* mouseenter event handler */ 
}, function() { 
  /* mouseleave event handler */ 
});

So the right brace on the 3rd line is in fact the closing brace for for the first function - then you’ll notice that there is a comma “,” there to indicate that we’re now beginning to pass in the next parameter to this method, which in this case is another anonymous function.

What might help you in writing and understanding JavaScript code a little bit better is if you use a code editor with good syntax highlighting, so that when you place your mouse cursor next to a brace, bracket or paren, it will highlight its matching counterpart. (See attached pic for example)

3

Thanks for that AussieJohn, that makes sense now