배경 이미지 전환/용이성 효과가있는 jQuery 호버

Question

나는 궁금해하며 주위를 수색했으며 대답을 찾을 수 없습니다. 지금은 hover에서 jQuery를 사용하여 배경 이미지를 변경하고 있습니다. 전환 시간을 추가 할 수 있습니까? 페이드처럼? ie8 호환? 배경 이미지 소스가 어쩌면 모든 요소 뒤에 위치한 두 개의 모의 배경을 만들고 그 뒤에 하나를 공개 호버에 나가 일을 페이드, 그라데이션의 속성이 아니므로

$('.logo').hover(function() { 
    $(this).css("background","url('url') no-repeat"); 
},function() { 
    $(this).css("background","url('url_hover') no-repeat"); 
}); 

Answer 1

:

여기에 코드입니다.

당신은 같은 것을 할 수 - jsFiddle Demo

HTML을

<div class="bgFadeToggle"> 
    <h1>Hello World</h1> 
    <div class="bg"><img src="image-1.jpg" /></div> 
    <div class="bg"><img src="image-2.jpg" /></div> 
</div> 

JS

$('.bgFadeToggle').hover(function(){ 
    $(this).find('.bg:first').stop(true).fadeToggle(); 
}); 

CSS

.bgFadeToggle { 
    position: relative; 
    z-index: 9999; 
} 

.bgFadeToggle .bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

.bgFadeToggle .bg { 
    z-index: -9998; 
} 

.bgFadeToggle .bg + .bg { 
    z-index: -9999; 
}