解决jquery中的动画不支持backgroundPosition背景偏移的问题

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-08-13 09:31:00　-　阅:　-　评:0　-　积分:0

前晚8点时洒家正在上着网，技术总监突然在qq上面找我，说ie7下网站的登录没有过渡效果。附图一张：

这不很正常嘛，css3本身就不支持低版本的ie，我回复说需要用jquery来写。然后自己开始写了,没想到这一写就是2个小时，好大一个坑！最终无果，次日到公司继续写。

说到此可能大部分读者还不知道洒家在表达什么，简单的说吧，这个问题是这样的：输入框获取焦点时头像背景发生位移，想兼容ie就需要用jquery来写。这里可能会有部分读者说，这还不简单，楼主花了2个小时还没解决，真垃圾，看我代码。啪啪啪，一串代码献上。

<script type="text/javascript">
$(function(){
$('input[type="text"]').focus(function(){
$(this).stop().animate({"background-position":"5px -44px"},300);
}).blur(function(){
$(this).stop().animate({"background-position":"5px -3px"},300);
});
});
</script>

看源码，理想状态下是对的，但是现实呢？现实是残酷的，动画效果根本就没有！而且位移也丝毫没有发生变化，不信可以亲自试试。如果将上面的“animate”替换成“css”，此时可以看到背景位移成功了，只是没有动画效果而已。回头检查拼写，确实没有出错，但为什么不执行呢？就这折腾了洒家2个小时，百度后才知道，jquery中的动画不支持backgroundPosition背景偏移，需要使用插件才行。

于是，洒家百度搜索了很多，虽然网上有许多网站中的文章都提及到“jquery.backgroundPosition.js”这款插件，并在文章中附有demo，但是点击后却发现并没有效果。百度翻了近10页，基本上全是他妹的一篇文章不停转载，那叫个坑爹啊！不能用，你转载个毛线啊，鄙视！！！直到今天上午，洒家还在搜索，看到有相关内容称此插件不兼容1.8以上jq库，于是洒家换成低版本的，结果还是不行，绝望了。就在这时，洒家又看到有知道里面回复说“backgroundPositionX”,截图一张
不管了，死马当活马医，修改源码如下：

<script type="text/javascript">
$(function(){
$('input[type="text"]').focus(function(){
$(this).stop().animate({backgroundPositionY:"-44px"},300);
}).blur(function(){
$(this).stop().animate({backgroundPositionY:"-3px"},300);
});
});
</script>

这一试，不试不知道，一试吓一跳，竟然成功了！完全不需要那个已过期的“jquery.backgroundPosition.js”插件了，简洁高效，赞！另外在搜索时发现网上说“jquery在firefox下不支持backgroundPositionY”，这个洒家没有测试。不过ff是非ie内核，可以使用css3来写，可能这种情况是特殊用途吧。下面附完整实例代码，兼容ie6。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>解决jquery中的动画不支持backgroundPosition背景偏移的问题--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="jquery动画不支持backgroundPosition,jquery backgroundPositionX,jquery背景偏移,jquery.backgroundPosition.js">
<style type="text/css">
*{margin:0; padding:0}input{width:200px;height:30px;line-height:30px;background:url(/d/file/xwzj/2014-08-13/login_ico.png) no-repeat 5px -3px;text-indent:30px;border:1px solid #ccc;*display:block;-webkit-transition: .3s ease-in;transition: .3s ease-in;}
input.hover{background-position:5px -44px}
</style><!--jq库的引用，这里是1.8.3-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
/*ie9以上以及webkit内核浏览器执行css3*/
$(function(){
$('input[type="text"]').focus(function(){
$(this).addClass('hover');
}).blur(function(){
$(this).removeClass('hover');
});
});
</script>
<!--兼容ie8以下用jquery来控制动画-->
<!--[if lt IE 9]>
<script type="text/javascript">
$(function(){
$('input[type="text"]').focus(function(){
$(this).removeClass('hover').stop().animate({backgroundPositionY:"-44px"},300);
}).blur(function(){
$(this).stop().animate({backgroundPositionY:"-3px"},300);
});
});
</script>
<![endif]-->
<!--兼容ie6以下png背景透明-->
<!--[if lt IE 7]>
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('input');
</script>
<![endif]-->
</head>
<body>
<input type="text" />
</body>
</html>

点此下载→→解决jquery中的动画不支持backgroundPosition背景偏移的问题.zip　　

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2014-08-13/189.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！