身体背景图像和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，所以它将被定位而不是当前内容的顶部而不是推下去。