Question

我知道 jquery ，我在试图让某些工作变得有点麻烦。

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

基本上我的页面顶部有一个隐藏的联系区域，当您点击按钮（a.contact）时，隐藏的联系区域（#contactArea）会从顶部向下显示，但是当contactArea显示时删除我的部分背景图像，直到再次点击该按钮为止。

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

我的css代码是：

body.page.page-id-240 {background：url（images / main-home-bg.jpg）center 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，以便将其定位在上当前内容的顶部，而不是将其推下来。

身体背景图像和jquery

1 个答案: