Toggle Background Position using jQuery

Question

I am new to jQuery and I am having a bit of trouble with trying to get something working.

Basically I have a wordpress site, on each page is a different background image for the body tag. I want to be able to toggle on a button and then the body background image to drop about 500px.

Basically I have a hidden contact area on the top of my page, and when you click on the button (a.contact) the hidden contact area (#contactArea) is revealed by dropping down from the top, however when the contactArea drops some of my background image is hidden until you click on the button again.

What I am trying to achieve is that the background image drops (still completely visible) when the hidden contactArea is revealed, so that the background image is always visible. I hope that makes sense?!

my css code is:

body.page.page-id-240 {
   background:url(images/main-home-bg.jpg) center 600px no-repeat;
}

My current jquery is:

$(window).load(function() {
    $("#contactArea").css('height', '0px');

    $("a.contact").toggle( 
        function () { 
            $("#contactArea").animate({ height: "225px" }, { queue:false, duration: 500, easing: 'linear' } )
        }, 
        function () { 
            $("#contactArea").animate({ height: "0px" }, { queue:false, duration: 500, easing: 'linear' }) 
        } 
    ); 
});

If anyone could help it would be greatly appreciated! :-)

Answer 1

Try this:

$("a.contact").toggle( 
    function () { 
        $("#contactArea").animate({ height: "225px" }, { queue:false, duration: 500,  easing: 'linear' } )
        $("body.page.page-id-240").animate({ backgroundPosition: "center 825px" });
    }, 
    function () { 
        $("#contactArea").animate({ height: "0px" }, { queue:false, duration: 500, easing: 'linear' }) 
        $("body.page.page-id-240").animate({ backgroundPosition: "center 600px" });
    } 
);