Aide à l'application d'un fondu au changement de position d'arrière-plan avec Jquery

Question

Je suis très nouveau dans Jquery mais j'ai finalement trouvé comment changer l'image d'arrière-plan (une image-objet) de mon #contentContainer lorsque je survole une image 'trigger' séparée . Cependant, pour la vie de moi, je ne sais pas comment appliquer un effet de fondu à la transition. Fondamentalement, au lieu de la transition de l'image d'arrière-plan brusque actuelle, je voudrais qu'il se fanent doucement sur mouseover et mouseout.

Voici mon (non fondu, mais de travail) script:

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 
$j("#swapTrigger").hover(
function() { 
$j("#contentContainer").css("background-position", "0px 1401px");  
}, 
function() { 
$j("#contentContainer").css("background-position", "0px 0px"); 
}); 
}); 

Un grand merci pour toute aide!

Answer 1

Essayez d'utiliser http://api.jquery.com/animate

$j("#contentContainer").animate({"background-position": "0px 1401px"}, "slow"); 

Answer 2

Vous pouvez animer la propriété de position d'arrière-plan, ce qui vous donnera une transition en douceur entre les 2 images:

$j("#swapTrigger").css({backgroundPosition: "0 0"}); 
$j("#swapTrigger").hover(
    function() { 
     $j("#contentContainer").animate({backgroundPosition: "0 1401px"});  
    }, 
    function() { 
     $j("#contentContainer").animate({backgroundPosition: "0 0"}); 
    } 
); 

Si votre question porte sur la décoloration de l'opacité des les images comme ils basculent entre les 2, vous ne pouvez pas le faire avec un seul élément. Vous aurez besoin d'ajouter votre image d'arrière-plan des éléments imbriqués, puis les effacer et sortir:

<div id="contentContainer"> 
    Some content 
    <div class="bg1"></div> 
    <div class="bg2"></div> 
</div> 

En vol stationnaire, les effacer et comme nécessaire:

var bg1 = $('.bg1'); 
var bg2 = $('.bg2'); 
$j("#swapTrigger").hover(
    function() { 
     if(bg1.is(':hidden')){ 
      bg1.stop().fadeIn(); 
      bg2.stop().fadeOut(); 
     } else { 
      bg2.stop().fadeIn(); 
      bg1.stop().fadeOut(); 
     } 
    } 
);