开发者社区> 问答> 正文

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

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以上,鼠标移上有动画效果,移出的话没有动画效果。(很奇怪)

展开
收起
杨冬芳 2016-06-17 18:33:38 3730 0
1 条回答
写回答
取消 提交回答
  • IT从业

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

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

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

    2019-07-17 19:43:28
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载