Question

我是jQuery的新手，我在尝试工作方面遇到了一些麻烦。

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

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

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

我的css代码是：

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

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

试试这个：

$("a.contact").toggle( 
    function () { 
        $("#contactArea").animate({ height: "225px" }, { queue:false, duration: 500,  easing: 'linear' } )
        $("body.page.page-id-240").animate({ backgroundPosition: "center 825px" });
    }, 
    function () { 
        $("#contactArea").animate({ height: "0px" }, { queue:false, duration: 500, easing: 'linear' }) 
        $("body.page.page-id-240").animate({ backgroundPosition: "center 600px" });
    } 
);

使用jQuery切换背景位置

1 个答案: