使用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" }); 
    } 
);