[JQ]Hover voert na hover direct mouseout uit?

[BryanD]

Goede maandag morgen mede tweakers,
Ik heb een raar(?) probleempje met een custom functie van mij.
Ik heb een functie die een klein pijltje doet bewegen onder een menu balk zodra men met de muis op de link gaat staan.

dit is de HTML structuur:

HTML:

<ul id="nav">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
<div id="arrow">
  <img src="pijltje.png"/>
</div>

En dit is mijn jQuery code:

JavaScript: jQuery

$.fn.hoverArrow = function( ){
    
    // Cache Variable's
    var cacheNav = $("#nav");
    var cacheArrow = $(".arrow");
    
    // Animation variables
    var animInSpeed = 600;
    var animOutSpeed = 1000;
    
    // Calculation variables
    var offsetLink;
    var offsetActive = cacheNav.children(".active").offset().left;
    var arrowOffset;
    
    var arrowCenter = (cacheArrow.children().width()) / 2;
    var activeCenter = (cacheNav.children(".active").width()) / 2;
    var linkCenter;
    
    function setArrow(){
        arrowOffset = (offsetActive + activeCenter) - arrowCenter;
        cacheArrow.children('img').css('left',arrowOffset);
    }
    setArrow();

    cacheNav.children("li").hover(function(){
        offsetLink = $(this).offset().left;
        linkCenter = ($(this).width()) / 2;
        arrowOffset = (offsetLink + linkCenter) - arrowCenter;
        cacheArrow.children('img').animate({left: arrowOffset}, { queue:false, duration: animInSpeed }, 'slide');
    },function(){   
        arrowOffset = (offsetActive + activeCenter) - arrowCenter;
        cacheArrow.children('img').animate({left: arrowOffset}, { queue:false, duration: animOutSpeed }, 'slide');
    });
    
}

Let op: [code]-tags kunnen ook een taal bevatten

Nu is dit het probleem:
Zodra ik hover over een link begint hij met animeren, en net als de animatie klaar is schiet hij in een keer terug zonder animatie naar de active link... Ik snap er helemaal niets van. Kan iemand mij hier bij helpen?
Indien er iets niet duidelijk is hoor ik dit graag.
B.v.d,

[ Voor 1% gewijzigd door BtM909 op 27-01-2011 11:39 ]

[R4gnax]

code:

queue: false

Dat kan nog wel eens voor problemen gaan zorgen. Als je snel over een link heen veegt zullen beide animaties min of meer parallel lopen. Echter, omdat ze allebei elke heartbeat v/d animatie op het html element de left CSS property manipuleren, zal er eentje 'winnen'. De winnende animatie is in dit geval de hover versie, dus zul je die vloeiend zien uitgevoerd worden. Zodra de hover animatie klaar is zal de andere animatie het ineens overnemen en zul je een grote verspringing zien.

Gebruik gewoon de stop(true) functionaliteit op de animatie queue in plaats van te lopen modderen met unqueued animaties. (Verder kun je de offsetLink, linkCenter, etc. variablen ook beter binnen je functie definieren. Dat scheelt je weer wat dure scope traversal.)

[Verwijderd]

Het lijkt erop dat je een plugin code schrijft voor iets wat geen plugin hoeft te zijn. Hoe vraag jij $.fn.hoverArrow op?

Als je dat via $(selector).hoverArrow doet, voert ie ook elke keer weer de setArrow reset uit.

Ik kan alleen niet direct opmaken of dit je probleem ook is. Ooit via bijvoorbeeld Firebug gekeken wat de code doet?

[BryanD]

Was inderdaad de stop die niet helemaal lekker liep
Ben er zelf ook achter gekomen .
Bedankt heren, @ luwe gaat idd met $(selector).hoverArrow, echter wel op de document
dus niet op de li of de a.

[Meijuh]

BryanD schreef op maandag 24 januari 2011 @ 11:51:
Was inderdaad de stop die niet helemaal lekker liep
Ben er zelf ook achter gekomen .
Bedankt heren, @ luwe gaat idd met $(selector).hoverArrow, echter wel op de document
dus niet op de li of de a.

Moet toch inderdaad met een $(document).ready() lukken?

[Bosmonster]

Idd. Nu is je plugin-opzet sowieso fout. Het breekt chaining en volgt niet de plugin-conventies.

Daarnaast is er functioneel gezien geen enkele reden hier een plugin van te maken, en al helemaal niet eentje voor document...

[ Voor 40% gewijzigd door Bosmonster op 24-01-2011 13:04 ]