jQuery hoverIntent - 関数を分割するとどうしたらいいですか？

Question

hoverintentのために関数を分割していましたが、divがマウスが離れるまで隠されていませんか？

私はこれを書いています。大丈夫です。あなたがたぶん分かるように、私はjqueryを初めて使っています。

$("img.nexthover").hover(
function() { this.src = this.src.replace("_off", "_on"); 
}, 
function() { this.src = this.src.replace("_on", "_off"); 
}); 
$('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').addClass('nextHide'); 
$('.nextbuttonA').hover(function() { 
$('#A.nextHide').fadeIn("slow");   
$('#B,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut(); 
}); 
$('.nextbuttonB').hover(function() { 
$('#B.nextHide').fadeIn("slow"); 
$('#A,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut(); 
});  
$('.nextbuttonC').hover(function() { 
$('#C.nextHide').fadeIn("slow"); 
$('#A,#B,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut(); 
});   
$('.nextbuttonD').hover(function() { 
$('#D.nextHide').fadeIn("slow"); 
$('#A,#B,#C,#E,#F,#G,#H,#I,#J.nextHide').fadeOut(); 
}); 
$('.nextbuttonE').hover(function() { 
$('#E.nextHide').fadeIn("slow"); 
$('#A,#B,#C,#D,#F,#G,#H,#I,#J.nextHide').fadeOut(); 
}); 
$('.nextbuttonF').hover(function() { 
$('#F.nextHide').fadeIn("slow"); 
$('#A,#B,#C,#D,#E,#G,#H,#I,#J.nextHide').fadeOut(); 
}); 
$('.nextbuttonG').hover(function() { 
$('#G.nextHide').fadeIn("slow"); 
$('#A,#B,#C,#D,#E,#F,#H,#I,#J.nextHide').fadeOut(); 
}); 
$('.nextbuttonH').hover(function() { 
$('#H.nextHide').fadeIn("slow"); 
$('#A,#B,#C,#D,#E,#F,#G,#I,#J.nextHide').fadeOut(); 
}); 
$('.nextbuttonJ').hover(function() { 
$('#I.nextHide').fadeIn("slow"); 
$('#A,#B,#C,#D,#E,#F,#G,#H,#J.nextHide').fadeOut(); 
}); 
$('.nextbuttonK').hover(function() { 
$('#J.nextHide').fadeIn("slow"); 
$('#A,#B,#C,#D,#E,#F,#G,#H,#I.nextHide').fadeOut(); 
}); 
$('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').click(function(){ 
    $('.nextHide').fadeOut(); 
}); 

hoverIntentを動作させるために私はこのような機能を分割：

$("img.nexthover").hover(
function() { this.src = this.src.replace("_off", "_on"); 
}, 
function() { this.src = this.src.replace("_on", "_off"); 
}); 
$('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').addClass('nextHide'); 

$('.nextbuttonA').hoverIntent(function() { 
$('#A.nextHide').fadeIn("slow"); 
}, function() { 
$('#B,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut(); 
}); 

$('.nextbuttonB').hoverIntent(function() { 
$('#B.nextHide').fadeIn("slow"); 
}, function() { 
$('#A,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut(); 
}); 

---etc---- 

しかし、あなたは前のようにボタンを去るまで、今divが隠れていないですか？ もしこれがあまりにも初心者であれば、私は自分自身を教えています...

Answer 1

興味があれば、私のjQueryの構文はおそらく良くなるかもしれませんが、私は別のプログラムの中で働いています。私は、だから何それはありませんが、あなたがする場合は非凡な、絶対配置要素を持っている部門を開くためにそれらにメガメニューをhoverintent使用し、その後、マウスオーバーのボタンに画像を追加しているHTMLに

$("img.nexthover").hover(
function() { this.src = this.src.replace("_off", "_on"); 
}, 
function() { this.src = this.src.replace("_on", "_off"); 
}); 
$('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').addClass('nextHide'); 

$('.nextbuttonA').hoverIntent(function() { 
$('#A').fadeIn("slow");$('#B,#C,#D,#E,#F,#G,#H,#I,#J').fadeOut(); 
}, function() { 
$('#B,#C,#D,#E,#F,#G,#H,#I,#J').hide(); 
}); 

$('.nextbuttonB').hoverIntent(function() { 
$('#B').fadeIn("slow");$('#A,#C,#D,#E,#F,#G,#H,#I,#J').fadeOut(); 
}, function() { 
$('#A,#C,#D,#E,#F,#G,#H,#I,#J').hide(); 
}); 

-------etc---------- 

を入力することができます。 nextHideのCSSはdisplay：none; cursor：pointer;そして、A、Bという名前のHTML div ... 男、このjQueryのものが大好きです。

ありがとう、素晴らしいリンク。