Whats wrong with this function

Question

I cant work out which brackets are in the wrong place and where and now im completely lost:

    $("#slid").click(function() {
        $("#div1").animate({ top: "25px",}, 300
        },function() {
            $("#div1").animate({ top: "85px",}, 300
        });
    });

Can anyone help?

Answer 1

This part:

},function() {

Should just be:

,function() {

Your callback is the third param, so no need for that additional closing brace that snuck in there. The trailing comma in the object your passing to animate may have issues in IE as well, so change this:
{ top: "25px",} to { top: "25px"} to be safe.

As a side note, plugging your code into something like jsbeautifier.org (or any of the other formatters) is a quick way to spot bracing errors, since they confuse the formatting engine and throw things off...making it easy to spot.

Answer 2

This should do it:

$("#slid").click(function() {
    $("#div1").animate({top: "25px"}, 300, function() {
            $("#div1").animate({top: "85px"}, 300);
    });
});

Note, in addition to what Nick said, you are missing a ) at the end of your inner animate method.

Answer 3

Removed commas after 25px and 85px (a trailing comma in an object fails in IE).
Fixed brackets.
Quoted top (my personal preference).
Using $(this) instead of looking up the element again in the animate callback function.

$("#slid").click(function() {
    $("#div1").animate({"top":"25px"},300,function() {
         $(this).animate({"top":"85px"},300);
    });
 });