0

私は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' }) 
        } 
    ); 
});

誰かがそれを助けることができれば、それは大歓迎です! :-)

4

1 に答える 1

0

これを試して：

$("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" });
    } 
);
于 2012-02-07T11:10:04.637 に答える