jquery의 배경 이미지 변경을 페이드 인하는 방법은 무엇입니까?

Question

그래서 나는 사용자가 마우스를 가져 가면 사용자의 배경 이미지가 변경되고 사용자가 이미지 위에 마우스를 놓으면 텍스트가 표시됩니다. div의 배경이 호버의 새로운 배경으로 사라 지도록하는 방법이 있습니까?

여기에 지금까지 http://jsfiddle.net/nGhMz/

Answer 1

I의 주위에 처음으로 귀하의 질문에 잘못-해석 내 현재 코드 ... 난 당신이 찾고있는 효과를 얻을 수 있도록 예제를 다시 일한

입니다. 그것이 가장 깨끗한 방법인지 확실하지 않습니다. 하나의 이미지를 오버레이로 사용하고 페이드 아웃합니다. 이 도움이

http://jsfiddle.net/nGhMz/7/

희망.

밥

Answer 2

당신은 배경 이미지를 퇴색 할 수는 없지만 z-index뿐만 아니라, relative 및 absolute 위치를 사용하여 뒤에 요소를 배치 할 수 있습니다.

그런 다음 해당 요소를 배경으로 희미하게 사용할 수 있습니다.

var imgSrc = 'new/image.png'; 
container.css({backgroundImage: 'url("' + imgSrc +'")'}); 
container.find('img').show().fadeOut(1000, function() { $(this).attr({src: imgSrc}) });