Hoveren showen, ervanaf, blijven staan

[raymond88]

Ben bezig met jQuery, heb er nog niet veel kaas van gegeten moet ik eerlijk bekennen. Nou heb ik het volgende;

$("#pijltje").hover(
function () {
$("#inhoud").show("medium");
},
function () {
});

Ik wil op de mouseover dus dat ie wat toont, en op de mouseout dus niets. Weet echter niet of ik het zo goed doe, want na wat documentatie te lezen, kwam ik tegen dat de eerste parameter de mouseover en de andere de mouseout is.
Anyways, het volgende issue; ik wil precies dezelfde code gebruiken voor nog een andere button. Dus dan niet pijltje als divje, maar bijvoorbeeld vierkantje als divje. Hoe ga ik dit mooi oplossen?

Tevens heb ik een divje waarop als ik erop sta, dan blijft ie staan, en als je eraf gaat dan moet ie hiden (medium). Echter, als hij naar links verdwijnt, en je gaat dan net naar dat hoekje waar hij gaat verdwijnen, gaat ie show/ hide/ show/ hide doen tot je blauw ziet.

 

[Tha Devil]

Je kunt meerdere ID's koppelen aan een bepaalde functie:
http://api.jquery.com/multiple-selector/
[js]
$("#pijltje, #vierkantje").hover(
function() {
$("#inhoud").show("medium");
}, function() {
//Mouseout
}
);
[/js]
Wat er nu dus wel gebeurd is dat bij zowel een hover over #pijltje als over #vierkantje de #inhoud wordt getoond.

Je tweede probleem is wat lastig te begrijpen, het zou helpen wanneer je de code er bij plaatst

 

[raymond88]

Je kunt meerdere ID's koppelen aan een bepaalde functie:
http://api.jquery.com/multiple-selector/
[js]
$("#pijltje, #vierkantje").hover(
function() {
$("#inhoud").show("medium");
}, function() {
//Mouseout
}
);
[/js]
Wat er nu dus wel gebeurd is dat bij zowel een hover over #pijltje als over #vierkantje de #inhoud wordt getoond.

Je tweede probleem is wat lastig te begrijpen, het zou helpen wanneer je de code er bij plaatst

Ja, dat is wat ik zocht. Had eerst 2x een id tussen haakjes, maar dat was dus niet goed

Mijn tweede probleem was met deze code. Het is zo dat de div float. Hij verwijnt bijvoorbeeld naar rechts. Als je dan naar rechts eraf gaat, waarnaar hij wil verdwijnen sta je er dus nog op als hij verdwijnt. Hij denkt dus dat je er nog op staat. Dan wil hij weer komen. En zo komt en gaat 'ie heel snel telkens afwisselend.

[JS] $("#inhoud").hover(
function () {
$("#inhoud").show("medium");
},
function () {
$("#inhoud").hide("medium");
});[/JS]

Wat ik nu heb gedaan is toggle gebruiken. Echter, ik wou wat meer animatie gebruiken.

 

[Tha Devil]

$().toggle(); is gelijk aan het gebruik van een $().show(); en een $().hide();

Erg veel meer animatie zie ik daar niet in.

Misschien dat het gebruik van de $().stop(); methode hulp biedt.
[js]
$("#inhoud").hover(
function () {
$("#inhoud").stop().show("medium");
},
function () {
$("#inhoud").stop().hide("medium");
}
);
[/js]
http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

 

[raymond88]

Bij stop wil hij dus niet meer helemaal eruit komen. Bij snel erop gaan staan als hij teruggaat, gaat ie de volgende keer niet verder eruit dan dat ie is blijven hangen.

Ik weet dat toggle hetzelfde effect heeft, ik gaf ook aan dat ik juist een animatie wou hebben. Het is zo dat hij nu gewoon heel snel verdwijnt, hetgeen niet echt prettig uitziet naar mijn mening.