Why does my jQuery "complete" callback break in Chrome & Safari but work fine in FF?

Question

I have some problem with this jQuery code. I'm new at this but it works in FF and yet breaks in Chrome and Safari. Grateful for suggestions in any way.

 $('#level1nav ul li a:last').click(function () {

 $(lastBlock).animate({height:"400px"}, {queue:false, duration:500, 
    complete: function() 
        $(line).animate({width:"0px"}, {queue:false, duration:500, 
            complete: function() {window.location="?info"}
        })
    });
return false;
}); 

Answer 1

Here's your problem:

complete: function() 
    $(line).animate({width:"0px"}, {queue:false, duration:500, 
        complete: function() {window.location="?info"}
    })

You're missing opening and closing curly braces for the outer function body. It should look like this:

complete: function()
{
  $(line).animate({width:"0px"}, {queue:false, duration:500, 
      complete: function() {window.location="?info"}
  })
}

This works in Firefox because JavaScript 1.8 introduced a "shorthand" for functions that doesn't require the braces in limited circumstances:

Expression closures

This addition is nothing more than a shorthand for writing simple functions, giving the language something similar to a typical Lambda notation.

...

This syntax allows you to leave off the braces and 'return' statement - making them implicit. There is no added benefit to writing code in this manner, other than having it be syntactically shorter.