transition background-image/css changement en stationnaire?

Question

J'ai un ongle dans un autre div, lorsque la vignette est plané Je veux que le div parent se décolore/passe à l'arrière-plan de la vignette, puis disparaisse à l'image originale après le vol stationnaire.

J'ai ceci jusqu'ici qui change le fond parent à celui de la vignette et du dos mais sans transition.

$(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

Il n'y a pas de solution 'build-in' pour la décoloration dans/un backgroundImage, mais vous pouvez jouer avec enchaînant animate()

.animate({opacity: 0.5}, 1000) 

par exemple. Ou utilisez .css() pour définir un nouveau niveau d'opacité.

Answer 2

D'après ce que Jandy a suggéré que je pouvais venir avec ceci:

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

}); 

ne est pas un vrai cross-fade, car il efface l'image originale sur, puis devient la nouvelle image Mais un proche. faire des compromis.