JQuery 1.5.1 vs 1.4.4 weirdness

Question

I get some strange errors when upgrading jQuery from 1.4.4 to 1.5.1. Perhaps you guys can explain what I need to change or why the new version does not work.

In 1.4.4, I have the following code

<div class="navlink home" data-link="home"> <span class="top">Home</span> </div> <div id="index-03"> </div> <div class="navlink resume" data-link="resume"> <span class="top">Resume</span> </div> <div id="index-05"> </div> <div id="index-06"> </div> <div class="navlink portfolio" data-link="portfolio"> <span class="bottom">Portfolio</span> </div> 

JS:

 $(".navlink").hover( function () { $(this).delay(100).animate({backgroundPosition: "-100% 0"}, 400); $(this).find("span").css("textDecoration","underline"); }, function () { $(this).queue("fx", []); $(this).animate({backgroundPosition: "0% 0%"}, 400); $(this).find("span").css("textDecoration","none"); } ); 

Which works just fine.

but when I switch jQuery versions by changing this line in my header from

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

to

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 

The above code completes the animation and the background image just disappears.

Here is a jsFiddle that shows what happens by simply changing the jQuery version on the side between 1.4.4 and 1.5.1

http://jsfiddle.net/fUXZ4/ - 1.4.4

http://jsfiddle.net/3APCd/ - 1.5.1

Here is a video exactly what is happening to me: http://img.zobgib.com/2011-03-07_1905.swf

Answer 1

Presumably (although I haven't tested it) jquery 1.5 is less tolerant of double numeric values, this is from .animate() docs:

All animated properties must be animated to a single numeric value.

I changed your animation to backgroundPositionX animation (you still did not change the y value), which will be a single numeric value.

Although this seems like intolerance + jquery error, because this fix does not work very well with 1.5.1, I also had to remove position:absolute , and then it plays well:

http://jsfiddle.net/fUXZ4/2/

Perhaps try to float and split the div to get the same look.

I would also recommend some code changes, like the $(this) chain, and using .stop(true,false) instead of your .queue() call.