Adicionando desbotamento à substituição da imagem do jQuery

Question

Estou criando um NAV que usa jQuery para substituir a imagem na rolagem. Aqui está o código que estou usando:

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

Basicamente, você adiciona um sufixo (_O) ao nome do arquivo e, quando você rolar o SRC, o jQuery o substitui pelo (_O) .png. Eu quero adicionar Fade, então, quando houver uma rolagem, a transição não é instantânea, mas há um desbotamento rápido e elegante. Alguma ideia?

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

Em vez de substituir, você precisará sobrepor uma nova imagem e desbotar -a, aguardando até que a transição seja concluída.

algo como...

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

Supondo que o elemento esteja absolutamente posicionado

Answer 3

Você pode colocar um segundo elemento (oculto) sobre a parte superior da sua imagem padrão e depois ver sobre o desbotamento daquele que entra e sai com uma rollover.