jquery Schwebebild Fade Swap

Question

Ich habe online eine Weile gesucht und versucht, den besten Weg zu finden, ein Jquery-Skript zu schreiben, das diese einfache Aufgabe erledigt: Ein Bild bei Hover mit einem eleganten Fade-Effekt austauschen. Ich habe viele Lösungen (in gewisser Weise umständlich und klobig) gefunden, und es verengt, was ich sehe, wie die beiden besten:

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

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

Für meine Zwecke, ich möchte in der Lage sein, Um dies zu tun, wechseln Sie mehrfach auf einer Seite. Die Seite ist http://www.vitaminjdesign.com. Ich habe derzeit auf meinem "Services Nav" (andere Art von Hover) schwebt, aber ich möchte sie auf alle Navigationsschaltflächen sowie die sozialen Symbole in der Fußzeile anwenden. Alle Hover werden die gleichen sein - zwei Bilddateien, eine, die beim Schweben in die andere eingeblendet wird, und auf Urlaub zurückkehrt. Was ist der beste Weg, dies zu tun? Einer der obigen Links vielleicht?

Answer 1

Sie könnten dies auch mit einem einzigen Hintergrundbild erreichen, und in & aus einem transparenten div überblenden. Hier ist ein kurzes Beispiel, das verlängert werden kann automatisch für eine einzige Klasse von Bild zu arbeiten:

$(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"); 
    }); 
}); 

Demo laufen kann jsbin zu sehen: demo-one

UPDATE: Hier ist eine generische Lösung (unvollständig, aber zeigt einige Ideen): demo-two. Fügen Sie einfach die Klasse "fade-img" zu jedem Bild hinzu, das diesen Effekt haben soll.

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

innen $(document).ready()

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

bearbeiten

wenn Sie dies tun wollen: http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

dann jthompson Antwort oder benutzen Sie einfach den Code von dieser Seite verwenden. wenn Sie zwei separate Bilder verwenden möchten, können Sie einen Blick auf diese haben wollen:

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

und die demo

, was es tut, ist

Es durch das Dokument sieht für beliebige "img" oder "Eingabe" -Tags mit einer Klasse von "ro". Das Rollover-Bild muss sein, benannt wie das normale Bild, aber mit "_o" am Ende. Zum Beispiel wird das Rollover-Bild für "image.gif" "image_o.gif" sein. Nachdem alle Image-Tags gefunden wurden, lädt das Skript alle Rollover-Images und zeigt die "Mouseover" - und "Mouseout" -Ereignisse an.

Answer 3

Image Cross Fade Transition with jQuery erklärt einige Möglichkeiten, dies zu nähern ..

Answer 4

ich für die Lösung in der zweiten Verbindung entscheiden Sie zur Verfügung gestellt. Es ist kurz, sauber und einfach.

• Erstellen Sie zwei <img> Tags
• Position ein genau übereinander (CSS mit z-index)
• auf schweben verblassen die Opazität des Bildes mit höherer z-index-0
• Dies macht es transparent und Sie sehen, das zugrunde liegende Bild
• Wenn der Schwebeflug endet, verblassen Sie die Opazität wieder auf 1.

Geschehen

Answer 5

Ich denke, dies ist die beste Methode, weil es CSS Sprites verwendet den Effekt zu erzielen. Das Tutorial und die Demo zeigen, wie Sie dies sowohl mit CSS3 als auch mit jQuery erreichen. Check it out unten:

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