переход фон-изображение/css изменить на hover?

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(), а просто установите новый уровень непрозрачности.

Answer 2

Основываясь на том, что JANDY предложил я смог придумать это:

$(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); 
       } 
      ); 
     } 
    ); 

}); 

Это не истинный кросс-выцветанию, потому что исчезает исходное изображение из, затем исчезает новое изображение Но близко. компромисс.