jQuery 1.5.1 vs 1.4.4怪异

时间:2011-03-07 23:39:25

标签: jquery css

当我将jQuery从1.4.4升级到1.5.1时,我遇到了一些奇怪的错误。也许你们可以解释我需要改变什么,或者为什么新版本不起作用。

在1.4.4中我有以下代码

<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");
    }
);

哪种方法很好。

但是当我通过从

更改标题中的这一行来切换jQuery版本时
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

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

以上代码退出动画,背景图像消失。

这是一个jsFiddle,显示正在发生的事情只是改变了1.4.4和1.5.1之间的jQuery版本

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

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

以下是我正在发生的事情的视频:http://img.zobgib.com/2011-03-07_1905.swf

1 个答案:

答案 0 :(得分:4)

据推测(虽然我没有检查)jquery 1.5对双重数值的容忍度较低,这来自.animate()文档:

  

应将所有动画属性设置为单个数值

我将动画更改为动画backgroundPositionX(您无论如何都没有更改y值),这将是单个数值。

虽然这似乎是一个不容忍+一个jquery错误,因为单独的修复不能很好地与1.5.1一起使用,我不得不删除position:absolute,然后它会很好看:

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

也许尝试浮动和间隔div来实现相同的外观。

我还建议进行一些代码更改,例如一直链接$(this),并使用.stop(true,false)而不是.queue()来电。