代码之家 › 专栏 › 技术社区 › user818700

在jQuery悬停时移动div背景位置

css jquery javascript

user818700 · 技术社区 · 13 年前

我正试图让它发挥作用,但由于某种未知的原因,图像没有变化。。看看我创建的JSfiddle here 。(当你悬停在图像上时,图像应该会跳跃,当你悬停时,图像会向下浮动)。

$(document).ready(function() {
  $('#hover-image').hover(

    function() {
      // Over
      $(this).animate({
        'background-position': 'center top'
      }, 5000);
    },
    function() {
      // Out
      $(this).animate({
        'background-position': 'center center'
      }, 5000);
    }
  );
});

#hover-image {
  width: 300px;
  height: 300px;
  background: url(http://icons.iconarchive.com/icons/artbees/paradise-fruits/256/Banana-icon.png);
  background-repeat: no-repeat;
  background-position: center center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="hover-image"></div>

编辑:我现在发现你不能在非数字css值上设置动画。将背景位置更改为使用百分比解决了问题。

2 回复 | 直到 13 年前

Samuel Liew cicero lopes 13 年前

不能为非数字CSS属性设置动画:

这个 .animate() 方法允许我们在任何数字 CSS属性。

资料来源: http://api.jquery.com/animate/

Andrey Shatilov 13 年前

看看这个插件 http://keith-wood.name/backgroundPos.html - 一个jQuery插件,允许对背景图像的位置进行动画处理。

i update jsfiddle

$(document).ready(function(){
    $('#hover-image').hover(

        function(){
            // Over
            $(this).animate({backgroundPosition: '50% 100%'},500);              
        },
        function(){
            // Out
            $(this).animate({backgroundPosition: '50% 50%'},500);             
        }
    );
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前