Ich möchte mein Menü animieren, doch leider tut sich nichts. Ich erhalte nur den folgenden Fehler in der Konsole: "Error in parsing value for 'background-position'".

Kann mir bitte jemand behilflich sein?

CSS:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

nav {     float:right;     width:626px; /* 750 - 124 */         height:157px;         }     nav li {         float:left;         margin-left:1px;         font-size:22px;         line-height:45px;                     }         nav li a {             display:block;             height:96px;             width:124px;             color:#818080;             text-align:center;             text-decoration:none;             padding-top:60px;             background:url(../img/n1-hover.gif) 0 -146px no-repeat;         }             nav li a:hover, nav .active {                 color:white;             }             nav .active { background-position:0 0 !important;             }     nav .n1 {background:url(../img/n1.gif) 0 0 no-repeat;}     nav .n2 {background:url(../img/n2.gif) 0 0 no-repeat;}     nav .n3 {background:url(../img/n3.gif) 0 0 no-repeat;}     nav .n4 {background:url(../img/n4.gif) 0 0 no-repeat;}     nav .n5 {background:url(../img/n5.gif) 0 0 no-repeat;}

JavaScript

Code :

1 2 3 4 5

$(document).ready(function() {                                     $('.menu a').hover(                 function(){$(this).stop().animate({backgroundPosition:'0px 0px'}, 800, 'easeOutBounce')},                 function(){$(this).stop().animate({backgroundPosition:'0px -146px'}, 600, 'easeOutBounce')});               });

jQuery unterstützt keine Animationen auf nicht-numerischen Werten (background-position sind zwei Werte). Du brauchst ein Plugin dafür.

Stimmt, ich habe vergessen zu erwähnen, dass ich folgendes Plugin benutze: JQuery Easing

Das Plugin hat aber nichts mit der Animation des Hintergrundes zu tun, sondern liefert nur ein paar neue Animations-Abläufe. Die so auch alle offiziell zu haben sind:
http://jqueryui.com/demos/effect/easing.html
https://github.com/jquery/jquery-ui/...s.core.js#L710

Du brauchst so was: http://keith-wood.name/backgroundPos.html

Klar, hab das Plugin etwas mit der angestrebten Animation zu tun. Auf der Website sind extra Beispiele aufgeführt, die die vorhandenen Animationen erweitern: jQuery Easing.

Ich sehe dort kein Beispiel, wo background-position animiert wird.

Ich zitiere mich nochmal. Wenn du es nicht mal ausprobierst (du musst ja nur das Plugin einbinden und sehen, dass es funktioniert...), kann ich dir leider nicht weiter helfen.

jQuery unterstützt keine Animationen auf nicht-numerischen Werten (background-position sind zwei Werte). Du brauchst ein Plugin dafür.

Du brauchst so was: http://keith-wood.name/backgroundPos.html