身體背景圖像和jquery

Question

我知道jquery，我有一些麻煩試圖找到工作。

基本上我有一個wordpress網站，每個頁面上都是不同的背景圖片，用於body標籤。我希望能夠在一個按鈕上切換，然後在主體背景圖像上放大約500px。

基本上我在頁面頂部有一個隱藏的聯繫區域，當你點擊按鈕（a.contact）時，隱藏的聯繫區域（#contactArea）通過從頂部向下拖動顯示，但是當contactArea會丟棄我的一些背景圖像，直到您再次單擊該按鈕。

我想要實現的是當隱藏的contactArea被揭示時，背景圖片會掉落（仍然完全可見），這樣背景圖片總是可見的....我希望這有意義嗎？！

我的CSS代碼是：

body.page.page-ID-240 {背景：網址（圖像/主家庭bg.jpg）中心 600px的不重複;

我現在的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

實現此目的的最簡單方法是讓暴露聯繫人區域的代碼向body標籤添加額外的CSS類，例如reposition-bg。然後定義適當的CSS類來修改主體的BG位置。那有意義嗎？

CSS：

body.reposition-bg { 
    /*your new position for when contact area is exposed*/ 
    background-position-y: 200px 
} 

，改變你的JS到：

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

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


}); 

或者，如果你有靈活性，這樣做並不會妨礙你的用戶界面，你可以設置#contactArea爲position: absolute，所以它將被定位而不是當前內容的頂部而不是推下去。