✔ JQuery backgroundPosition animation

[SonMiko]

Hallo zusammen,

ich weiss nicht warum aber plötzlich funktioniert meine Background-Animation nicht mehr.
Ich habe immer auf diesem Weg gearbeitet und den Code so angelegt - irgendwo scheint ein Drehwurm drin zu sein, aber ich habe keine Ahnung wo...

Hier der HTML Code:

<div class="navigation">
                    <ul>
                        <li>
                            <a href="">Home</a>
                        </li>
                    </ul>
</div>

Und nun der JQuery Code:

$(document).ready(function() {    
    //navigation buttons
    $(".navigation ul li a").mouseover(function(){
       $(this).animate({
           'backgroundPosition':'0px -31px'
       },300,'swing'); 
    });
});

Dazu noch der CSS Code:

.navigation ul li a{
    display:block;
    width:101px;
    height:28px;
    padding-top:3px;
    margin-left:1px;
    background-image:url("../img/btn.png");
    background-repeat:no-repeat;
    text-align:center;
    font-size:15px;
    color:#fff;
    text-shadow:0px 1px 1px #000;
}

Hat jemand eine Ahnung was ich falsch mache bzw. warum keine Animation erzeugt wird?
Total merkwürdig ist auch, dass wenn ich das "px" aus dem .animate rausnehme, oder den 2. Wert lösche (den für die Vertikalachse), dass es dann animiert wird. Im ersten Fall, wenn ich nur die PX lösche, wird lediglich das Finale Bild angezeigt, aber ohne die Animation dazwischen.
Klar hab ich schon geschaut ob die Effekte eventuell ausgeschaltet sind, aber das ist nicht der Fall.
Es handelt sich um eine Neuanlage einer Seite und Jquery 1.7.
Es wurden hier keine Einstellungen vorgenommen...

Viele Grüße,

Mike

 

[SonMiko]

Also dieser aufruf hier klappt:

$(this).animate({'backgroundPosition':'10px'},1000);

Allerdings muss ich die Vertikal Achse ansteuern und wenn ich dies versuche und den 2. Wert mit rein nehme, geht wieder gar nichts. Es sei denn ich nehme beim ersten Wert dann das "px" raus - dann vergeht jedoch komischerweise bloß die Standarddauer der Animation in der nichts geschieht und plötzlich wird das Endbild geladen, also der Zielzustand...

 

[CPoly]

Hast du ein Plugin für die Animation? Wenn nicht, dann http://keith-wood.name/backgroundPos.html

 

[SonMiko]

Das ist ja strange - musste man das immer schon einsetzen?
Danke, es klappt mit dem Plugin nun.

 

[CPoly]

Das ist ja strange - musste man das immer schon einsetzen?

Ja, mir ist nichts anderes bekannt. Intern macht jQuery keine Unterscheidung, was du animierst (font-size, left, width, etc.). Aber eben mit der Einschränkung, dass es ein einzelner Wert sein muss. Background-position ist aber einer der seltenen Fälle, dass es ein zusammengesetzter Wert ist und es keine Möglichkeit gibt, beide getrennt zu behandelt. Es gibt leider kein background-position-x oder background-posititon-y.

 

[SonMiko]

Achso okay, danke.
Ich vermute ich hatte wohl immer ohne zu wissen weitere Plugins drin die das "Problem" gelöst hatten. Danke