A-A+

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

2016年03月18日 JavaScript 暂无评论 阅读 77 次

1.animateBackground-plugin.js 已经不需要,

2.backgroundPositionY  和backgroundPositionX需要分别设置,直接设置backgroundPosition 不起作用对于jquery来说

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

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

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

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

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

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

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>解决jquery中的动画不支持backgroundPosition背景偏移的问题--艺灵设计,qq群:231749938</title>
  6. <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
  7. <meta name="keywords" content="jquery动画不支持backgroundPosition,jquery backgroundPositionX,jquery背景偏移,jquery.backgroundPosition.js">
  8. <style type="text/css">
  9. *{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;}
  10. input.hover{background-position:5px -44px}
  11. </style><!--jq库的引用,这里是1.8.3-->
  12. <script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
  13. <script type="text/javascript">
  14. /*ie9以上以及webkit内核浏览器执行css3*/
  15. $(function(){
  16. $('input[type="text"]').focus(function(){
  17. $(this).addClass('hover');
  18. }).blur(function(){
  19. $(this).removeClass('hover');
  20. });
  21. });
  22. </script>
  23. <!--兼容ie8以下用jquery来控制动画-->
  24. <!--[if lt IE 9]>
  25. <script type="text/javascript">
  26. $(function(){
  27. $('input[type="text"]').focus(function(){
  28. $(this).removeClass('hover').stop().animate({backgroundPositionY:"-44px"},300);
  29. }).blur(function(){
  30. $(this).stop().animate({backgroundPositionY:"-3px"},300);
  31. });
  32. });
  33. </script>
  34. <![endif]-->
  35. <!--兼容ie6以下png背景透明-->
  36. <!--[if lt IE 7]>
  37. <script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/DD_belatedPNG_0.0.8a.js"></script>
  38. <script type="text/javascript">
  39. DD_belatedPNG.fix('input');
  40. </script>
  41. <![endif]-->
  42. </head>
  43. <body>
  44. <input type="text" />
  45. </body>
  46. </html>

原文地址:http://www.yilingsj.com/xwzj/2014-08-13/189.html

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录