jQuery中aninamte不能改变背景/颜色的解决问题

改变样式用addClass("selected"）方法的话，要保证这个元素以前没有这个属性(比如selected是设置的background的话，要保证元素以前没有设置background属性)

如果元素设置过属性要修改的话用.css（name,value）方法

aninamte不能改变背景/颜色

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：

http://www.yilingsj.com/xwzj/2014-08-13/189.html

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

作者:艺灵设计 | 来源:http://www.yilingsj.com | 时间:2014-08-13 09:31:00 | 评:0 | 阅:1341 | 积分: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来写，可能这种情况是特殊用途吧。

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

转载声明：

　　若亲想转载本文到其它平台，请务必保留本文出处！

本文链接：

http://www.yilingsj.com/xwzj/2014-08-13/189.html