jquery animate 实现背景图动画效果出现的问题? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

jquery animate 实现背景图动画效果出现的问题?

2016-06-17 18:33:38 3352 1

demo在这里https://jsfiddle.net/pkzt064c/点击预览

.d1{
    width:20px;
    height:20px;   background:url(http://www.nuoyidata.com/templets/heibai/images/menu_ico1.png) no-repeat; 
    background-position:0 0;
}
<div class="d1"></div>

$(function(){
   $(".d1").hover(function(){
      $(this).animate({
         "background-position-x":"0",
          "background-position-y":"-29px"
       },500);
   },function(){
       $(this).animate({
         "background-position-x":"0",
         "background-position-y":"0"
       },500);
   });
});

chrome没有问题。
ff下无法移动。
IE7,8没有问题。
IE9以上,鼠标移上有动画效果,移出的话没有动画效果。(很奇怪)

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:43:28

    貌似只有webkit和ie支持吧。
    解决方法:

    1.把图片写在html里,使用定位然后top控制显示图片显示位置。附效果demo点击预览

    2.详见知乎里的同一问题解决办法

    0 0
相关问答

1

回答

我需要域名备案法人拍照的背景布

2018-01-16 17:10:01 2156浏览量 回答数 1

1

回答

jquery 的插件 layer问题

2016-07-12 09:56:03 1351浏览量 回答数 1

1

回答

关于jquery validate ajax表单验证的一些问题

2016-07-06 10:33:11 1800浏览量 回答数 1

1

回答

让jquery实现该文本域中value取的session中的值为0时,将值变为1

2016-06-01 00:44:38 1607浏览量 回答数 1

1

回答

为什么 jQuery的html()方法不能获取tr标签?

2016-06-01 08:41:47 2530浏览量 回答数 1

1

回答

java网站怎需要买哪些东西才可以发布通过域名访问呢?

2016-05-19 17:45:45 5331浏览量 回答数 1

1

回答

jquery图片查看器的问题

2016-03-16 09:42:22 1870浏览量 回答数 1

2

回答

关于IOS UIImageView动画效果 的问题

2016-03-11 09:34:55 1690浏览量 回答数 2

1

回答

Android在动画结束的onAnimationEnd中移除视图报空指针

2016-03-10 10:22:26 1917浏览量 回答数 1

1

回答

关于 jquery实现Ajax 但是没有效果

2016-02-17 21:55:35 2318浏览量 回答数 1
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载