jQuery hoverIntent - Co robię źle, kiedy dzielę funkcję? - jquery

Rozdzieliłem funkcję dla hoverintent i to działało, ale teraz div nie ukrywa się dopóki mysz się nie opuści?

Napisałem, że działa dobrze, jestem nowy w jquery, jak możesz prawdopodobnie powiedzieć.

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

Aby uruchomić hoverIntent, dzielę funkcję w następujący sposób:

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

Ale teraz div nie ukrywa się, dopóki nie opuścisz przycisku tak jak wcześniej? Przepraszam, jeśli to zbyt nowicjusz, uczę się skacząc ...

Odpowiedzi:

Mam to, jeśli jesteś zainteresowany, moja składnia jQuery mogłaby być prawdopodobnie lepsza, ale pracuję w ramach innego programu, więc mam ograniczenia, w jaki sposób mogę wprowadzić kod 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----------

Więc to, co robi, to dodać obraz na przyciskuna mouseover, a następnie użyj hoverintent na nich, aby otworzyć podziały, które mają elementy pozycjonowane absolutnie, mega menu extraordinaire, jeśli chcesz. Następna ukryte css jest wyświetlane: brak; kursor: wskaźnik; i HTML divs o nazwie A, B ... Człowieku, uwielbiam te rzeczy z jQuery.

Dzięki elclarenrs, świetne linki.