jQuery: Imagem crossfading em foco

Question

Eu estou tentando implementar um 'Fade em' script que iria afectar duas imagens:

<script type="text/javascript">

  $(document).ready(function(){

        $('img').mouseover( function() {

              $(this).fadeOut(200, function() {

                    $(this).attr({'src':'http://example/images/image.png'});

               if (this.complete) $(this).fadeIn(500);

              });
        });

  });

</script>

Este pouco de jQuery dá-me o seguinte:

1 - primeiros a imagem desaparece e desaparece 2 -., Em seguida, a partir de um espaço em branco, emerge o novo

Então, eu gostaria de melhorar o roteiro, a fim de obter um 'Fade em' real efeito.

Há dois grandes recursos que tenho vindo a explorar até agora:

• Cycle Plugin - muito legal (I vai tentar obter esse efeito ciclo em foco)
• JQuery para Designers legal, mas eu tinha um monte de problemas com o IE (a fronteira pixelizada preto estranho na fadeIn).

Muito obrigado se alguém pode apontar uma solução adicional eventual.

Jan

Editar : truque CSS / solução aqui http: // paragraphe. org / stackoverflowdemos / crossfade-images /

Answer 1

Ultimamente eu encontrei um CSS focada solução:. Absolutamente posicionamento de uma imagem "sobre" o outro, enfraquecendo-o a 0 com jQuery no documento pronto, e fade para a plena no mouseover / fade novamente a 0 sobre mouseout

Answer 2

A maneira que você está chamando o segundo fade, como uma chamada de retorno para o fade original será garantir que eles sejam executados um após o outro.

pode ter mais sorte com este

$('img').mouseover( function() {
          $(this).fadeOut(200);
          $(this).attr({'src':'http://example/images/image.png'});
          if (this.complete) $(this).fadeIn(500);
        });

Embora você ainda vai estar no caprichos do tempo de carregamento da segunda imagem, a menos que ele é pré-carregado algum lugar.

Answer 3

Esta é uma espécie de longa correção, mas é o que eu faço para obter fades suaves. Eu uso o Fadeout, então, como uma chamada de retorno, eu uso $ .ajax para realmente carregar uma nova imagem, então eu uso o sucesso: função do que para adicionar o ao div (ou img), em seguida, usar a completa: função para disfarçá-la . Isso resulta em ação suave-fadeout-NewContent fadein.

Aqui está um exemplo de carregar um arquivo php, o princípio é o mesmo com a imagem:

$("#leftbar").fadeOut("normal", function() {
$.ajax({
    url: "bin/leftBar.php",
    cache: "false",
    success: function(data) {
        $("#leftbar").html(data);
    },
    complete: function() {
        $("#leftbar").fadeIn("normal");
    }
});