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()相同。

如果您只想更改背景图片的位置，则可以定位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'})
                }
        );
});

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

如果要为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

你能否更具体地了解掉落（通过下降500px，上面的背景将是白色的）。我假设你的图像大小超过了所需的背景，所以即使在跌落之后，也会有一些图像在顶部。

首先在CSS中：

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

然后在jquery

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

可以使用div而不是body来完成.animate函数。

jQuery背景图像移动点击

更新

2 个答案:

更新