Ajout d'un fondu au remplacement de l'image jquery

Question

Je crée un nav qui utilise jquery pour remplacer l'image lors du rollover. Voici le code que je utilise:

http://peps.ca/blog/easy-image-rollover-script-with-jquery/

essentiellement, vous ajoutez un suffixe (_o) au nom du fichier et quand vous le capotage src, jquery le remplace par le (_o) .png. Je veux ajouter un fondu donc quand il y a un retournement, la transition n'est pas instantanée, plutôt il y a un fondu rapide et élégant. Des idées?

Answer 1

$('#the_image).hover(function() { 
    $(this).fadeOut(function() { 
    $(this).attr('src', $(this).attr('src').replace(".png", "_o.png")).fadeIn(); 
    }); 
}, function { 
    $(this).fadeOut(function() { 
    $(this).attr('src', $(this).attr('src').replace("_o.png", ".png")).fadeIn(); 
    }); 
}); 

Answer 2

Vous pouvez superposer un second élément (caché) au-dessus de votre image par défaut, puis voir à propos de l'évanouissement de celui-ci avec un survol.

Answer 3

Au lieu de remplacer, vous devrez superposer une nouvelle image et l'afficher progressivement, en attendant que la transition soit terminée.

quelque chose comme ...

$('.my_img').parent().append($('.my_img').clone().attr('src','my_img_o.jpg').fadeIn('slow')) 

en supposant que l'élément est absolument positionné