Question

I have been getting some weird errors when I upgrade jQuery from 1.4.4 to 1.5.1. Maybe you guys can explain what I need to change or why the new version is not working.

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 quits animating and the background image just disappears.

Here is a jsFiddle that shows what’s happening just change 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 of exactly what is happening to me: http://img.zobgib.com/2011-03-07_1905.swf

Answer 1

Presumably (although i didn’t check) jquery 1.5 is less tolerant of double numeric values, this is from the .animate() docs:

All animated properties should be animated to a single numeric value

I changed your animation to animate backgroundPositionX (you weren’t changing the y values anyway), which will then be a single numeric value.

Although this seems to be both an intolerance + a jquery bug, because that fix alone doesn’t play well with 1.5.1, I had to also remove the position:absolute, and then it plays nice:

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

Maybe try floating and spacing the div’s to achieve the same look.

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