2つのjQueryホバースクリプトを結合する

Question

ポートフォリオの場合、画像と追加のサブテキストを含むキャプションを含むエントリを作成しました。 画像の上を移動すると、画像がグレースケールからカラーに変わります（CSS画像の置き換え）。 キャプションの上にマウスを置くと、スライドしてサブテキストが表示されます。

この2つの機能を組み合わせたいと思います。エントリーのどこかを動かすと、グレースケールからカラーに変わり、サブテキストが滑ります。

私はJSfiddle設定：http://jsfiddle.net/blendwerk/q8HtS/

どのように私は私の目標をachiveできます。私は何か助けてください。

Answer 1

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

あなただけの絵と文章で全領域にマウスイベントを添付する必要があり、イベントを再バインドするための保険のために、あなたは、将来的にseparatlyそれらを再バインドするための名前空間を設定することができます。

Answer 2

あなたは、現在のページ幅の100％であるdiv要素のサイズを、制限する必要がある場合があります。この

http://jsfiddle.net/C8yV7/

ノートのように、ラッピングのdivに一つだけのホバーイベントを追加してみてください

Answer 3

ここに希望の効果があります：

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