当我将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>
Run Code Online (Sandbox Code Playgroud)
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");
}
);
Run Code Online (Sandbox Code Playgroud)
哪个工作得很好.
但是当我通过更改标题中的这一行来切换jQuery版本时
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Run Code Online (Sandbox Code Playgroud)
至
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
Run Code Online (Sandbox Code Playgroud)
上面的代码退出动画,背景图像就消失了.
这是一个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
据推测(虽然我没有检查)jquery 1.5 对双数值的容忍度较低,这是来自文档的.animate():
所有动画属性都应动画为单个数值
我将您的动画更改为动画backgroundPositionX(无论如何您都没有更改 y 值),这将是一个数值。
虽然这似乎既是一个不容忍+一个 jquery bug,但因为单独的修复在 1.5.1 中效果不佳,我还必须删除position:absolute, 然后它运行得很好:
也许尝试浮动并间隔 div 以获得相同的外观。
我还建议对代码进行一些更改,例如$(this)始终链接,以及使用.stop(true,false)而不是您的.queue()调用。
| 归档时间: |
|
| 查看次数: |
1732 次 |
| 最近记录: |