我试图让它工作,但由于某些未知原因,图像没有变化。查看我创建的 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 值上设置动画。更改背景位置以使用百分比解决了问题。
最佳答案
您不能为非数字 CSS 属性设置动画:
The
.animate()
method allows us to create animation effects on any numeric CSS property.Source: http://api.jquery.com/animate/
关于javascript - 在 jQuery 悬停时移动 div 背景位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18398443/