2010-05-23 11 views
3

배경으로 'home.jpg'이미지가있는 div가 있는데 뭔가를 클릭하면 배경이 'another_image.jpg'가되고 싶습니다. 문제는 새로운 배경을 페이드 인으로 만들고 싶지 않다는 것입니다 (일부 .css ('background', url ('another_image.jpg'));)jQuery 배경 이미지 전환

할 방법이 있습니까? 나는 bgImageTransition 플러그인을 시도했지만 그것은 단지 내가 가진 사업부의 상단에 다른 요소 ...

감사합니다,

답변

3

이 작업을 수행 할 수있는 유일한 방법은 새로운 배경으로 다른 요소에 페이드 인을 추가합니다.

또는 배경을 즉시 변경 한 다음 이전 배경으로 새 요소를 만들고 을 퇴색하여을 제거 할 수 있습니다.

0

편집 : http://jsfiddle.net/8vHa2/3/

(JQuery와 로고를 클릭)

효과 이런 종류의 페이드 아웃되는 제 2 구성 요소를 필요가 있다는 사실을 숙지 또는 내 추천 그렇게 : 크로스 페이드 효과를 추가 노력하고있는 플러그인을 계속 사용하는 것입니다.

+0

아마도 그는 크로스 페이드를 원합니다. – SLaks

+0

@SLaks - 글쎄, 그는 선택의 여지가 없지만 당신이 제안한 것과 같은 첫 번째 요소를 fadeOutOut 크로스 페이드 솔루션으로 예제를 편집했습니다. – Ben

+0

'this.after()'를 호출 할 수 있습니다. – SLaks

1

배경 이미지에 애니메이션을 적용하는 것에 대해 this blog post을 확인해야합니다. 매우 멋진 효과입니다. 두 이미지를 스프라이트로 바꾸고 스크립트를 사용하면됩니다.

Here is the demo.

+1

그것은 깔끔한 트릭이지만 전용 이미지가 필요합니다. – SLaks