Kombinieren Sie zwei jQuery-Hover-Skripte

Question

Für ein Portfolio habe ich einen Eintrag mit einem Bild und einer Beschriftung mit zusätzlichen Subtext erstellt. Wenn Sie den Mauszeiger über das Bild bewegen, ändert sich das Bild von Graustufen zu Farbe (css image replacement). Wenn Sie den Mauszeiger über die Beschriftung bewegen, wird sie nach oben verschoben und zeigt einen Subtext an.

Ich möchte diese beiden Funktionen kombinieren. Wenn ich irgendwo auf dem Eintrag schwebe, würde ich das Bild von Graustufen zu Farbe wechseln und den Subtext nach oben schieben.

stellte ich einen JSfiddle up: http://jsfiddle.net/blendwerk/q8HtS/

Wie kann ich mein Ziel achive. Ich appreciate jede Hilfe.

Answer 1

http://jsfiddle.net/q8HtS/3/

Sie müssen nur mit Bild und Text, Mausereignisse auf ganzes Gebiet befestigen und für Versicherungsfall erneut zu binden Sie einen Namespace sie separat einstellen können in Zukunft erneut zu binden.

Answer 2

Versuchen nur ein Hover-Ereignis an die Verpackung div Zugabe, wie dieser

http://jsfiddle.net/C8yV7/

Hinweis Sie können auch die Größe des div beschränken müssen, die derzeit 100% der Seitenbreite ist

Answer 3

Hier ist der gewünschte Effekt:

$(function() { 
    $(".fadeimg").find(".spanimg").hide(); 
    $(".fadesub").find(".spansub").hide(); 

    $(".fadeimg").hover(
     function(){ 
      $(this).find(".spanimg").stop(true, true).fadeIn(1000); 
      $(this).next().find(".spansub").stop(true, true).slideDown(500); 
     }, 
     function(){ 
      $(this).find(".spanimg").stop(true, true).fadeOut(1000); 
      $(this).next().find(".spansub").stop(true, true).slideUp(500); 
     } 
    ); 
    $(".fadesub").hover(
     function() { 
      $(this).find(".spansub").stop(true, true).slideDown(500); 
      $(this).prev().find(".spanimg").stop(true, true).fadeIn(1000); 
     }, 
     function() { 
      $(this).find(".spansub").stop(true, true).slideUp(500); 
      $(this).prev().find(".spanimg").stop(true, true).fadeOut(1000); 
     } 
    ); 
});