jQuery 背景图像在单击时移动

Question

我是 jQuery 的新手，在尝试让某些东西正常工作时遇到了一些麻烦。

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

我的CSS代码是：

body.page.page-id-240 {background:url(images/main-home-bg.jpg) center 600px no-repeat;

更新

我的页面顶部有一个隐藏的联系区域，当您单击按钮（a.contact）时，隐藏的联系区域（#contactArea）会显示出来，但是我的一些背景图像被隐藏了直到您再次单击该按钮。

我想要实现的是，当隐藏的联系表单显示时，背景图像会下降（仍然完全可见）。

我当前的 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

下面是在事件处理程序中绑定到一个元素并更改另一个元素的 CSS 的示例：

//bind a `click` event handler to the element with the ID of `button-id`
$('#button-id').on('click', function () {

    //now select the `body` element and change it's CSS background property
    $('body').css('background', 'url(/images/main-home-bg.jpg) center 600px no-repeat');
});

请注意，.on() 是 jQuery 1.7 中的新功能，与 .bind()< /code> 在旧版本中。

如果您只想更改背景图像的位置，则可以定位 background-position 属性而不是 background 属性：

$('#button-id').on('click', function () {
    $('body').css('background-position', 'center 100px');
});

这是一个演示：http://jsfiddle.net/DkUwM/1/

更新

$(window).load(function() {
    $("#contactArea").css('height', '0px');
    $("a.contact").toggle(
                function () {
                    $('body').css('background-position', 'center 600px');
                    $("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'} )
                },
                function () {
                    $('body').css('background-position', 'center top');
                    $("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'})
                }
        );
});

在这里，这将重新定位单击 a.contact 元素时，将 background-image 附加到 body 元素。

如果您想要以动画方式更改 background-position 属性，您将需要包含一些更新 jQuery 的代码才能执行此操作：http://www.protofunc.com/scripts/jquery/backgroundPosition/

这是一个动画示例background-position 属性：

$(window).load(function() {
    $("#contactArea").css('height', '0px');
    $("a.contact").toggle(
                function () {
                    $('body').animate({
                       'background-position' : '50% 600px'
                    }, 500);
                    $("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'} )
                },
                function () {
                    $('body').animate({
                       'background-position' : '50% 0'
                    }, 500);
                    $("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'})
                }
        );
});

这是一个演示：http://jsfiddle.net/ DkUwM/4/

请注意，您可以使用 background-position-x 和 background-position-y 但 Firefox 不支持这些（它们不在W3C 规范但都是由 Internet Explorer 实现的。

Answer 2

您能否更具体地介绍一下drop。（通过制作500px的drop，上面的背景将是白色的）。我假设您的图像尺寸大于背景所需的尺寸，因此即使在下降后，图像的某些部分也会位于顶部。

首先在 CSS 中：

body
{
background-position:0px 0px; 
}

然后在 jquery 中，

$("#btn").click(function(){
$("body").css({"background-position":"0px 500px"});
});

可以使用 div 而不是 body 通过 .animate 函数完成相同的操作。