jQuery: fondu sur l'image en survol

Question

J'essaie d'implémenter un script "fondu en" qui aurait une incidence sur deux images:

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

Ce morceau de jQuery me donne les informations suivantes:

1 - l'image disparaît puis disparaît 2 - puis, d'un espace vide, il émerge le nouveau.

J'aimerais donc améliorer le script afin d'obtenir un véritable effet de "fondu dans".

Il y a deux excellentes ressources que j'ai explorées à ce jour:

• Plugin de cycle - très cool (j'essaierai d'obtenir cet effet de cycle en survol)
• JQuery for Designers sympa, mais j'ai eu beaucoup de problèmes avec IE (une étrange bordure pixelisée noire sur le fondu).

Merci beaucoup si quelqu'un peut signaler une solution supplémentaire éventuelle.

Jan

MODIFIER : solution / solution CSS ici http: // paragraphe. org / stackoverflowdemos / crossfade-images /

Answer 1

Dernièrement, j’ai trouvé une solution centrée sur CSS: positionner absolument une image sur "&"; un autre, le fondant à 0 avec jQuery sur le document prêt et passant en fondu au passage de la souris / fondu à nouveau à 0 au passage de la souris.

Answer 2

La façon dont vous appelez le deuxième fondu, car un rappel du fondu d'origine garantit leur exécution successive.

Pourrait avoir plus de chance avec cette

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

Bien que vous soyez toujours à la merci du temps de chargement de la deuxième image, à moins que celui-ci ne soit préchargé quelque part.

Answer 3

C’est une sorte de solution longue, mais c’est ce que je fais pour obtenir des fondus lisses. J'utilise Fadeout, puis comme callback, j'utilise $ .ajax pour charger une nouvelle image, puis j'utilise success: function pour ajouter le à la div (ou img), puis j'utilise la fonction complete: pour l'affaiblir. Cela se traduit par une action de fondu-nouveau-contenu-fondu en douceur.

Voici un exemple de chargement d'un fichier php, le principe est le même avec une image:

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