jQuery를 사용하여 배경 위치를 전환하십시오.

Question

저는 jQuery를 처음 사용하고 있으며, 작동하는 데 약간의 문제가 있습니다.

기본적으로 저는 각 페이지에 body 태그에 대한 다른 배경 이미지가 있습니다. 버튼을 누른 다음 신체 배경 이미지를 전환하여 약 500 픽셀을 떨어 뜨리고 싶습니다.

기본적으로 내 페이지 상단에 숨겨진 연락처 영역이 있으며 버튼 (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" }); 
    } 
);