[jQuery] Hover handlerOut werkt wel, maar handlerIn niet

[TheNephilim]

Zoals de titel vermeld heb ik problemen met de jQuery functie .hover()

http://api.jquery.com/hover/

JavaScript:

jQuery(document).ready(function() {
            jQuery('#header-menu ul li').hover(
                function () {
                    jQuery(this).animate({
                        backgroundPosition: '0 -33px'
                    }, 
                    300);
                },
                function () {
                    jQuery(this).animate({
                        backgroundPosition: '0 0'
                    }, 
                    300);
                }
            );
        });

In bovenstaande voorbeeld wil ik de background-position aanpassen van li waarvan de background een sprite is van 66 pixels hoog. Hier zit een gradient in en deze wil ik graag naar onder verschuiven. Hier een voorbeeld:

http://snook.ca/technical/jquery-bg/

Maar ik krijg het niet aan de gang, hij voert handlerIn gewoon niet uit en handlerOut wel, ik zie als ik m'n muis van de li afhaal namelijk background-position: 0 0; verschijnen in element style in Chrome. Heeft iemand enig idee waarom dit niet zou werken?

Edit

Inmiddels heb ik het werkend met onderstaande code, hier met mouseover en mouseout, maar hover werkt ook gewoon. Blijkbaar accepteert jQuery het niet dat er 'px' achter de getallen staat...

Het probleem nu is dat het ding niet animeerd, hij wijzigd gewoon de background position en wacht daar de duration mee.

JavaScript:

jQuery(document).ready(function() {
            jQuery('#header-menu ul li').mouseover(function () {
                jQuery(this).stop().animate({
                    backgroundPosition: '0 -33'
                }, 
                300);
            }).mouseout(function () {
                jQuery(this).stop().animate({
                    backgroundPosition: '0 0'
                }, 
                300);
            });
        });

[ Voor 25% gewijzigd door TheNephilim op 08-12-2011 17:29 ]

[RobIII]

Die url is leuk (maar doet 't soms niet...) maar heb je ook een eigen testcase online staan waar we naar kunnen kijken? Zet anders even een minimale testcase op http://jsfiddle.net/ ofzo. Als ik 't test werkt 't namelijk precies zoals 't zou moeten.

[ Voor 21% gewijzigd door RobIII op 08-12-2011 17:34 ]

[TheNephilim]

Thnx! Ik heb even een JSfiddle gemaakt:

http://jsfiddle.net/wKCmW/

Zoals ik in de edit al vermelde, heb ik het handler probleem verholpen; hij accepteerde geen px in de value.

Maar nu animeert hij niks en wacht hij gewoon 300ms voordat hij de wijziging doorvoerd

Edit

Omg dit meen je niet, background-position over de y axis werkt gewoon niet. Met een plugin krijg je het wel werkend, ik heb mijn JSfiddle aangepast...

[ Voor 23% gewijzigd door TheNephilim op 08-12-2011 17:44 ]

[_Thanatos_]

Klopt, background-position is geen getal-achtige property maar een pseudo-shorthand. Pseudo, omdat background-position-x (en -y) niet in alle browsers bestaat. Net zoals dit heb je voor bijvoorbeeld kleurenanimatie ook een plugin nodig die animeert tussen twee kleuren.

Er zijn ook properties die sowieso nooit animeerbaar zijn, zoals display, cursor, of text-align

[R4gnax]

Waarom voor zo'n simpel en onbelangrijk effect als deze eigenlijk JavaScript gebruiken? Gewoon CSS transitions inzetten en de browsers die dit niet ondersteunen laten schakelen zonder vloeiende overgang.

[Bosmonster]

Omdat vooralsnog de ondersteuning voor javascript een stuk groter is dan die voor css transitions.

Dus als de vraag is "dit moet animeren", kies je een oplossing die in zoveel mogelijk browsers werkt. Niet eentje die maar werkt in 50% van de browsers. Hoe hip je oplossing ook is.

[ Voor 5% gewijzigd door Bosmonster op 09-12-2011 10:05 ]