[JS]Muis problemen

[BryanD]

Beste tweakers,

Ik heb een vraag m.b.t. javascript en muis events.
Ik heb een zij-balk die onhover uitschuift.

Dit is de html van de balk:

code:

<div id="sidebar">
 <!-- Content hier -->
 <span class="trigger"></span>
</div>

Nu is het zo dat de trigger ene plaatje is wat visueel naast de sidebar staat. Dit werkt allemaal lekker alleen nu moet het zo zijn dat:
1: Zodra men de muis over de trigger beweegt dat de sidebar het beeld in komt (hier is een functie voor)
2: Zodra men de muis over het kleine stukje sidebar beweegt wat in het beeld staat (40px o.i.d) dat de sidebar in beeld komt.

Echter is het zo dat ik dat als volgt oplossen kan:

code:

$("#sidebar").hover(function(){
 // Beeld in functie hier
},function(){
 // Beeld out functie hier
});
$(".trigger").hover(function(){
 // beeld in functie hier
},function(){
 // beeld out functie hier
});

Echter heb ik vervolgens het probleem, dat zodra ik de muis op de trigger zet, de animatie begint en vervolgens gaat de muis automatisch weer van de trigger af en schiet hij dus terug.
Dit moet niet gebeuren, hoe kan ik dit voorkomen? En het zelfde geld met de sidebar zelf, daar staan formulieren etc. in en zodra de muis daar over bewogen word vliegt de sidebar weer terug.

Nu is het zo dat zodra de sidebar in beeld is het 2 seconden moet duren voordat hij naar zijn plek terug gaat. Dus dat moet er ook in, ik had in gedacht zoiets:

code:

$("#sidebar").hover(function(){
 // beeld in
},function(){
 var interval = setInterval(function(){
   // beeld uit
  clearInterval(interval);
  },2000);
});

Is dat de goeie richting op of zit ik er nu naast.
Mijn excuses voor de lap tekst maar goed.
De vraag is dus:
- Hoe zorg ik er voor dat zowel de trigger als de sidebar zelf de sidebar doen uitschijven, en hoe kan ik de browser laten denken dat de muis er nog niet vanaf is zodra die op het formulier staat.

B.v.d,

[Bosmonster]

Ik zou persoonlijk, vanuit usability-oogpunt, het sluiten mouse-out laten varen. Daar word je, zeker met formulieren, helemaal knettergek van.

Maar een sluitbutton in je sidebar en/of zorg dat als de rest van je document aangeklikt wordt de sidebar sluit.

[BryanD]

Naja, het is de wens van de klant, en de kans dat ik de klant over halen kan is vrij klein volgens mij.

Maar even een off-topic vraag voor een andere klant,

code:

$('.project > div').hover(function(){
        $(this).stop().animate({'width': '540px'}, 750,function(){
            $(this).find("span").fadeOut(1050);
            $(this).find("p").animate({ height: "140px", display: "block" }, 1050);
        });
    },function(){
        $(this).stop().animate({'width': '190px'}, 750,function(){
            $(this).find("span").fadeIn(1050);
            $(this).find("p").animate({ height: "0px", display: "none" }, 1050);
        });
    });

War is hier fout aan? IE 8 en lager geven doodleuk foutmeldingen weer en zodra de animatie compleet is (de eerste) dan krijg ik een fout. Ik snap er geen zak van. In FF werkt het gewoon.

[Killemov]

Dit is zowiezo geen standaard javascript. De $() notatie geeft een indicatie dat je waarschijnlijk prototype.js gebruikt. De .hover( func, func ) ken ik ook niet. Is dat een shortcut voor onmouseover en onmouseout?

Verder moet je voor je beeld-uit functie GEEN interval (repetitief) maar een timeout (1x) gebruiken.

[BryanD]

Killemov, is jquery library, maar goed.
En idd hover (function, function) is hoverIn en hoverOut.

Bedankt voor de timeout tip

[Bosmonster]

BryanD schreef op vrijdag 14 januari 2011 @ 14:36:
Naja, het is de wens van de klant, en de kans dat ik de klant over halen kan is vrij klein volgens mij.

Daar heb je een adviesrol voor.

Maar goed, de klant komt er zelf wel achter als die het formuliertje in wil vullen en zn muis even aan de kant schuift

[robin84]

bij de mouse out ipv .stop() .delay(2000) gebruiken zou er voor moeten zorgen dat het menu altijd helemaal uitschuift en pas weer naar 2 seconden terug gaat als de muis van het object af is.

----- EDIT ----

Het was wel degelijk gericht op je OP.

bij de trigger stel je de delay in op het moment dat je deze verlaat van 2 seconden (hierdoor heb je 2 seconden de tijd om bij het menu te komen). Hier moet ook geen stop() in de animatie staan omdat je wil dat deze altijd wel naar de zichtbare positie schuift.

Op de sidebar voeg je dan de hover toe zodat deze helemaal uitschuift. Wanneer alle forms ed ook binnen de div van de sidebar vallen zou deze niet weg moeten vallen op het moment dat je hier overheen gaat.

[ Voor 58% gewijzigd door robin84 op 14-01-2011 15:43 ]

[BryanD]

@bosmonster, Ach tja, ik kan het natuurlijk opperen, maar ik denk dat het toch zo moet.
@Robin, dat stukje code was voor een andere vraag, maar goed die is al opgelost:)