jQuery syntax error? Css and Animate in 'if' and 'else' statements

Question

Edit - Ive changed my code:

This works fine:

$(".image-div").click(function () {
        if ($(this).css('z-index') == 1) 
            $(this).css('z-index','2');
        else 
            $(this).css('z-index','1');
});

And this also works:

    $(".image-div").click(function () {
        if ($(this).css('z-index') == 1) 
            $(this).animate({
                width: '500px'
            }, 5000, function() {
                // Animation complete.
            });
        else 
            $(this).animate({
                width: '250px'
            }, 5000, function() {
                // Animation complete.
            });
    });

But this doesn't do anything:

    $(".image-div").click(function () {
        if ($(this).css('z-index') == 1) 
            $(this).css('z-index','2');
            $(this).animate({
                width: '500px'
            }, 5000, function() {
                // Animation complete.
            });
        else 
            $(this).css('z-index','1');
            $(this).animate({
                width: '250px'
            }, 5000, function() {
                // Animation complete.
            });
    });

Thanks

Check your if Closing and as well as closing anonymous functions — Someone
– Someone, Commented Jun 8, 2011 at 19:26

John Strickler · Accepted Answer · 2011-06-08 19:23:54Z

7

Yes. No beginning { or ending } after the if & before the else.

Also, it looks like a double }); at the bottom.

answered Jun 8, 2011 at 19:23

John Strickler

25.4k6 gold badges55 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Richard Marskell - Drackir Over a year ago

And consequently the if is only being applied to this line: ` $(this).css('z-index','2');` which is why that works but the other doesn't.

John Strickler Over a year ago

Yes, that isn't necessary a syntax error in itself. But the else is now unexpected which is a syntax error.

Kevin Nelson · Accepted Answer · 2011-06-08 21:39:54Z

2

Looks like you need curly braces around your if...otherwise, that else is floating with no connected if.

[ADDED] Okay, curly braces are needed for ANY controls with multiple statements following. The following works fine without curly braces because there's only one statement after each control:

if( condition ) doSomething();
else doSomethingElse();

However, this will break:

if( condition ) 
  doSomething();
  doAnotherThing();
else
  doSomethingElse();

Why? Because the IF in this case only covers this:

if( condition ) 
  doSomething();

Then, you have this sitting out in the middle of nowhere:

  doAnotherThing();
else
  doSoemthingElse();

doAnotherThing is NOT contained inside the if(), and thereby neither is your else{}. So, your else loses its attachment to the if and the code breaks. It is, IMHO, best practice to ALWAYS use curly braces, because if you don't, you or someone else may come in and add the doAnotherThing() line to the code thinking it's contained in the if() and inadvertently break the code.

That said, your if/else both contain multiple statements. So, from strictly a syntax point, your code needs to be:

$(".image-div").click(function () {
    if ($(this).css('z-index') == 1) { 
        $(this).css('z-index','2');
        $(this).animate({
            width: '500px'
        }, 5000, function() {
            // Animation complete.
        });
    }
    else {
        var divRef = this;
        $(this).animate({
            width: '250px'
        }, 5000, function() {
            $(divRef).css('z-index','1');
        });
    }
});

edited Jun 8, 2011 at 21:39

answered Jun 8, 2011 at 19:25

Kevin Nelson

7,7134 gold badges34 silver badges42 bronze badges

4 Comments

Evanss Over a year ago

where do I need braces? Ive updated my answer but ive tried curly braces everywhere I could think off with no luck. thanks

Kevin Nelson Over a year ago

Okay, added an explanation for why you needed curly braces and the change I would make to your code syntax-wise. Obviously, still can't guarantee that it works, but it should be syntactically correct.

Evanss Over a year ago

It does work but I have a follow up question. The z-index change occurs after the animation is run, can the order be changed? I do want the z-index change to run after the else animation, but I need to happen before the if animation. Thanks again.

Kevin Nelson Over a year ago

Changed the else in my code above so that it should change the z-index when animation completes.

Collectives™ on Stack Overflow

jQuery syntax error? Css and Animate in 'if' and 'else' statements

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related