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

开发者社区> 问答> 正文

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

2016-06-17 18:33:38 3313 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
相关问答

12

回答

在阿里云上安装和运行Node.js全功略

ycwong 2013-09-18 15:17:30 66969浏览量 回答数 12

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 58055浏览量 回答数 19

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 160087浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 96740浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 149038浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 148186浏览量 回答数 31

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 86598浏览量 回答数 23

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 81851浏览量 回答数 13

31

回答

OSS for PHPWIND 8.7 [20121127更新]

enj0y 2012-09-10 15:48:13 56031浏览量 回答数 31

15

回答

对象存储oss【问答合集】

我是管理员 2018-08-03 14:54:02 69692浏览量 回答数 15
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载