jQueryを使用して背景の位置を切り替える

Question

jQueryを初めて使用しています。私は何か問題を解決しようとすることに少し問題があります。

私は基本的に私は各ページにbodyタグの異なる背景画像です、ワードプレスサイトを持っています。私は、ボタンをトグルして体の背景画像を約500ピクセル落とすことができるようにしたい。基本的には

私は私のページの一番上に隠された接触面積を持っている、とあなたはボタン（a.contact）隠し接触面積（#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" }); 
    } 
);