身体背景图片和jquery

Question

我了解jquery，但在尝试让某些东西正常工作时遇到了一些麻烦。

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

基本上我在页面顶部有一个隐藏的联系区域，当您单击按钮（a.contact）时，隐藏的联系区域（#contactArea）会通过从顶部下拉而显示，但是当 contactArea 掉落一些时我的背景图像将被隐藏，直到您再次单击该按钮。

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

我的CSS代码是：

body.page.page-id-240 {background:url(images/main-home-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类来修改body的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'}) 
            } 
    ); 


});

或者，如果您可以灵活地这样做并且不会妨碍您的 UI，则可以将 #contactArea 设置为 position:absolute 因此它将定位在当前内容的顶部，而不是向下推。