I'm trying to animate a background image to move down a set amount of pixels but remain in the center of the page. Upon another click of an element I need it to move back to the top, but still remain in the center. Below is the current code:

        $(document).ready(function() {
        $('#email_campaigns').click(function(){
            var width = $(window).width();
            width = (width / 2) - 700;

            if($('#email_campaigns_box').css('display') == 'none'){
                //$('body').css('background-position','center 119px');
                $('body').animate({
                    backgroundPosition: (width + "px 119px")
                }, {duration:500});
            } else {
                //$('body').css('background-position','center top');
                $('body').animate({
                    backgroundPosition: (width + "px 0px")
                }, {duration:500});
            }

            $('#email_campaigns_box').slideToggle("slow");
            $('#client_login_box').slideUp("slow");             
        });

        $('#client_login').click(function(){
            var width = $(window).width();
            width = (width / 2) - 700;

            alert(width);

            if($('#client_login_box').css('display') == 'none'){
                //$('body').css('background-position','center 119px');
                $('body').animate({
                    backgroundPosition: (width + "px 119px")
                }, {duration:500});
            } else {
                //$('body').css('background-position','center top');
                $('body').animate({
                    backgroundPosition: (width + "px 0px")
                }, {duration:500});
            }

            $('#client_login_box').slideToggle("slow");
            $('#email_campaigns_box').slideUp("slow");              
        });
    });

I cannot pass 'center', as it will onyl accept numeric values. My goal is to calulate the center of the page in pixels (width = (width / 2) - 700;), and then animate to this rough position (it's normally out by a few pixels due to scrollbars, and then force to the center using a .css() call.

The problem is that IE does not want to play ball. IE will not animate at all. Firefox/Safari/Chrome all work as expected.

Below is a live example: http://recklessnewmedia.com/new/# (click 'email campaigns' at the top).

Thanks