jquery hover image fade swap

Question

J'ai cherché en ligne pendant un certain temps, essayant de trouver la meilleure façon d'écrire un script jquery qui fait cette tâche simple: échanger une image sur le vol stationnaire avec un effet de fondu élégant. J'ai trouvé beaucoup de solutions (d'une certaine façon à la lourdeur et maladroites), et réduit à ce que je vois que les deux meilleurs:

http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

Pour mes besoins, je veux être en mesure pour faire ce swover swap de nombreuses fois sur une page. La page est http://www.vitaminjdesign.com. J'ai actuellement planer sur mes "services nav" (différents types de survol) mais je veux les appliquer à tous les boutons de navigation, ainsi qu'aux icônes sociales dans le pied de page. Toutes les images seront les mêmes: deux fichiers d'image, l'un passant à l'autre en vol stationnaire et retournant en congé. Quel est le meilleur moyen de s'y prendre? Un des liens ci-dessus peut-être?

Answer 1

Vous pouvez également accomplir ceci en utilisant une seule image d'arrière-plan, et en fondant & sur un div transparent. Voici un exemple rapide, qui pourrait être étendu pour fonctionner automatiquement pour une seule classe de l'image:

$(document).ready(function() { 
    $("#mask-div") 
     .css({ 
      "position": "absolute", 
      "width": 275, 
      "height": 110, 
      "background": "rgba(255, 255, 255, 0.5)" 
     }) 
     .mouseover(function() { 
      $(this).fadeOut("slow"); 
     }) 
    ; 
    $("#test-img").mouseout(function() { 
     $("#mask-div").fadeIn("slow"); 
    }); 
}); 

démo en cours peut être vu à jsbin: demo-one

MISE À JOUR: Voici une solution plus générique (incomplète, mais montre quelques idées): demo-two. Ajoutez simplement la classe "fade-img" à n'importe quelle image que vous voulez avoir cet effet.

$(document).ready(function() { 
    $(".fade-img") 
     .before("<div class='fade-div'></div>") 
     .each(function() { 
      var img = $(this); 
      var prev = img.prev(); 
      var pos = img.offset(); 

      prev.css({ "height": img.height(), "width": img.width(), "top": pos.top, "left": pos.left }) 
       .mouseover(function() { 
        $(this).fadeOut("slow"); 
       } 
      ); 
     }) 
     .mouseout(function() { 
      $(this).prev().fadeIn("slow"); 
     }) 
    ; 
}); 

Answer 2

intérieur $(document).ready()

$('.imgbuttonclass').hover(function(){ 
    $(this).animate({ 
     backgroundImage: 'img2.png' 
    },500); 
},function(){ 
    $(this).stop(true).animate({ 
     backgroundImage: 'img1.png' 
    },500); 
}); 

modifier

si vous voulez seulement faire: http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

puis utilisez la réponse de jthompson ou tout simplement utiliser le code de cette page. si vous souhaitez utiliser deux images distinctes, vous pouvez jeter un oeil à ceci:

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

et demo

ce qu'il fait est

Il regarde à travers le document pour tout "img" ou "entrée" tags avec une classe de "ro". L'image de survol doit être nommée comme l'image normale mais avec "_o" à la fin. Par exemple, l'image survolée pour "image.gif" sera "image_o.gif". Après avoir trouvé toutes les balises d'image , le script précharge toutes les images de survol et affiche les événements "mouseover" et "mouseout".

Answer 3

Image Cross Fade Transition with jQuery explique une certaine façon d'aborder ce ..

Answer 4

J'opte pour la solution dans le deuxième lien fourni. C'est court, propre et simple.

• Créer deux <img> balises
• Placez un exactement sur l'autre (CSS avec z-index)
• En vol stationnaire fanent l'opacité de l'image avec plus z-index-0
• Cela rend transparent et vous voyez l'image sous-jacente
• Lorsque le survol se termine, l'opacité de fondu se rétablit à 1.

Fait

Answer 5

Je pense que cela est la meilleure méthode, car il utilise les sprites CSS pour obtenir l'effet. Le tutoriel et la démo illustrent comment y parvenir en utilisant CSS3 ainsi que jQuery. Check it out ci-dessous:

http://css-tricks.com/fade-image-within-sprite/