SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript syntax ?

    Hi all

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

    Code:
    $('#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

    Code:
    function FunctionName(){
     // function
    
    }
    I know Javascript works more like

    Code:
    $('#fader').hover(function() {
     // function
    
    })

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Let's look at the signature for the jQuery.hover method- then we'll expand it from there.

    The signature:
    Code JavaScript:
    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:

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

    Of course - once we format the code:

    Code JavaScript:
    $("#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)
    Attached Images Attached Images
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that AussieJohn, that makes sense now


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •