JQuery left: += not working in IE

Question

So I have a pretty simple problem here, been looking all over the web but I'm unable to find any answers. I have a page with some JQuery - the first set animates a bunch of buttons with set values (which works fine in IE). I however get some problems when I try to use:

left: '+=1024'

This is only not working in IE, in fact, it buggers out the whole of the script. This is the section that I use it in (it just basically moves the background with some buttons):

//BG rotator
  $counter = 2;

//left-btn
$("#left-btn").click(function(){
    $("#rotator").animate({
        left: '+=1024',
    },1000); 
    --$counter;
    if ($counter == 1) {
        $("#left-btn").css("display", "none");
    } else {
        $("#left-btn").css("display", "block");
        $("#right-btn").css("display", "block");
    }
});

What I initially thought was to just grab the current left property of the div, and assign that to a variable, but for some reason using a variable with the left animation wasn't working either. I tested all of the code, everything works when I remove that "left" bit in the animation.

Any help would be appreciated, thanks!

Have you tried to increase `left` manually and see if element changes position correctly? Alternatively, you can try to shift it by increasing `left-margin`. — keaukraine, Nov 09 '12 at 11:42
@keaukraine I have tried manually, it works perfectly. IE is really just having some odd problem with the '+=1024'. Margins are doing the same. — Hiriji, Nov 09 '12 at 12:27
Can you please build a demo of the problem, perhaps on [jsFiddle](http://jsfiddle.net)? — andyb, Nov 09 '12 at 14:05
@andyb Built one on jsFiddle. Managed to recreate the problem for IE7. I apologize if my code is clunky, I'm fairly new to JQuery. [link](http://jsfiddle.net/eNxrU/11/) — Hiriji, Nov 10 '12 at 07:05
Ah it's a JavaScript error I should have spotted without the demo. You have a trailing comma which is [not allowed](http://stackoverflow.com/questions/201782/can-you-use-a-trailing-comma-in-a-json-object), although some browsers silently ignore it. IE7 is not one of them :-) I think the existing answer was probably trying to allude to that but is really missing the important explanation! If you are happy to accept that answer please do. I'm going to edit it now to explain why. — andyb, Nov 10 '12 at 09:07

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

change this line and see if works:

left: '+=1024px' // <-- note the missing ,

as there is a JavaScript error in IE7 because the trailing comma is not allowed - see Can you use a trailing comma in a JSON object?

edited May 23 '17 at 12:12

Community

1
1

answered Nov 09 '12 at 11:51

Jai

74,255
12
74
103

Thank you! It always to get fresh eyes on something, especially when working on it for hours. I didn't know that it wasn't in fact allowed, so glad I got to learn something new. Thanks mate. – Hiriji Nov 11 '12 at 14:28

JQuery left: += not working in IE

1 Answers1