使用 jQuery 切换背景位置

Question

我是 jQuery 新手，在尝试让某些东西正常工作时遇到了一些麻烦。

基本上我有一个 wordpress 网站，每个页面上都有一个不同的背景图片，用于 body 标签。我希望能够打开一个按钮，然后将主体背景图像下降约 500 像素。

基本上我的页面顶部有一个隐藏的联系区域，当您单击按钮 (a.contact) 时，隐藏的联系区域 (#contactArea) 会从顶部下拉显示，但是当在您再次单击该按钮之前，contactArea 会隐藏我的一些背景图片。

我想要实现的是，当隐藏的contactArea 被显示时，背景图像会下降（仍然完全可见），以便背景图像始终可见。我希望这是有道理的？！

我的css代码是：

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

我当前的 jquery 是：

$(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' }) 
        } 
    ); 
});

如果有人可以提供帮助，将不胜感激！ :-)

Answer 1

试试这个：

$("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" });
    } 
);