jQuery cross-browser issue

Question

I have this code that works great in all browsers but not IE6, and I have no idea why, can anyone shed any light on this?

$("#handle").toggle(    
    function () {
        $('#login').animate({
            marginTop: '0',
        }, 1000);
        $("#handle").addClass('opened');
        return false;
    }, 
    function () {
        $('#login').animate({
            marginTop: '-280',
        }, 1000);
        $("#handle").removeClass('opened');
        return false;
    }
);

Answer 1

You have trailing commas in the object literals passed to animate(). IE does not support this. This should work:

$('#login').animate({
  marginTop: '0' //No comma, can you see it?
}, 1000);

Answer 2

Yes, I guess I can.

The EVIL COMMA has GOT you !!

marginTop: '0',  // remove comma

and

marginTop: '-280', // remove comma

Trailing commas are a big NoNo in IE's.

Answer 3

Also shouldn't it be

"-280px" // added "px"