Question

I cannot figure out how to get this code to work properly. I am recieving an unexpected identifier for the line:

complete:function() {

from this block of code:

$(document).ready(function(){

var doorOpen = false;

$("a[href=#andrew]").click(function() {

    if (doorOpen) { // set animation duration for door close, based on actually needed to animate the door closed or not
        var duration = 1500;
    } else {
        var duration = 0;
    }

    $("#rightdoor,#leftdoor").animate(
        {"marginLeft":"0px"},
        {duration:duration},
            complete:function() {
                $('.pic2 .pic3 .pic4 .pic5').css('zIndex', 1);  //puts wrong pics in back
                $('.pic1').css('zIndex', 2);  //brings right pic into view
                $('#rightdoor').animate({  //opens doors again
                 marginLeft: "150px",
                }, 1500);
                $('#leftdoor').animate({
                 marginLeft: "-150px",
                }, 1500);
            }
    );

    doorOpen = true;

    return false;
});

});

I am new to Javascript so I may be missing something obvious here..

Answer 1

Look at the line:

$("#rightdoor,#leftdoor").animate({"marginLeft":"0px"}{duration:duration,complete:function() {

You’re missing a comma between the first two parameters of animate.

It should be:

$("#rightdoor,#leftdoor").animate({"marginLeft":"0px"},{duration:duration},complete:function() {

It’s better to correct the extra commas which are after the last key-value pair of the objects. It’ll save you from errors in IE.

You should change the animate call to:

$("#rightdoor,#leftdoor").animate(
    {"marginLeft":"0px"},
    {duration:duration,
        complete:function() {
            $('.pic2 .pic3 .pic4 .pic5').css('zIndex', 1);  //puts wrong pics in back
            $('.pic1').css('zIndex', 2);  //brings right pic into view
            $('#rightdoor').animate({  //opens doors again
             marginLeft: "150px",
            }, 1500);
            $('#leftdoor').animate({
             marginLeft: "-150px",
            }, 1500);
        }
    }
);