마우스 오버시 전환 배경 이미지/CSS 변경?

Question

다른 div 안에 엄지 손톱이 있습니다. 미리보기 이미지를 올리면 부모 div가 사라지고 축소판 배경으로 전환되기를 원한다면 마우스를 올려 놓으면 원본 이미지로 다시 사라집니다.

나는 지금까지 부모 배경을 축소판의 배경으로 바꿨지 만 이전에는 변경되지 않았습니다.

$(document).ready(function() { 

    var originalBG; 
    var hoverBG; 
    $(".alt-img").hover(
     function() { 
      originalBG = $(this).parent().css('backgroundImage'); 
      hoverBG = $(this).css('backgroundImage'); 
      $(this).parent().css('backgroundImage',hoverBG); 
     }, 
     function() { 
      $(this).parent().css('backgroundImage',originalBG); 
     } 
    ); 

}); 

Answer 1

은 인/아웃 backgroundImage의 페이딩에 대한 '구축 기능을'솔루션이 없다,하지만 당신은 예를 들어 animate()

.animate({opacity: 0.5}, 1000) 

체인 함께 놀러 수 있습니다. 또는 .css()를 사용하여 새로운 불투명도 레벨을 설정하십시오. jAndy 내가이 가지고 올 수 있었다 어떤 제안을 바탕으로

Answer 2

:

$(document).ready(function() { 

    var originalBG; 
    var hoverBG; 
    $(".alt-img").hover(
     function() { 
      originalBG = $(this).parent().css('background-image'); 
      hoverBG = $(this).css('background-image'); 
      //$(this).parent().css('background-image',hoverBG); 
      $(this).parent().animate({opacity: 0.1}, 200, 
       function() { 
        $(this).css('background-image',hoverBG); 
        $(this).animate({opacity: 1}, 200); 
       } 
      ); 
     }, 
     function() { 
      //$(this).parent().css('background-image',originalBG); 
      $(this).parent().animate({opacity: 0.1}, 200, 
       function() { 
        $(this).css('background-image',originalBG); 
        $(this).animate({opacity: 1}, 200); 
       } 
      ); 
     } 
    ); 

}); 

그것의 원래 이미지를 페이드 아웃하기 때문에하지 진정한 크로스 페이드, 다음의 새로운 이미지를 페이드 그러나 가깝습니다. 타협.