使用jQuery切换背景位置

Question

我是jQuery的新手，我在尝试获取某些工作时遇到了一些麻烦。

基本上我有一个wordpress网站，在每个页面上都是body标签的不同背景图片。我希望能够在一个按钮上切换，然后在主体背景图像上放大约500px。

基本上我有一个隐藏的接触面积，在我的页面的顶部，当你点击按钮（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" }); 
    } 
);