jquery - jQuery动画背景

Question

我在悬停主 div 时使用 jquery 更改子 div 的背景。

$('#bottom-a .module.responsive').hover(function () {
    $('#bottom-a .responsive .mod-icon').css({
        "background-position": "left bottom"
    });
}, function () {
    $('#bottom-a .responsive .mod-icon').css({
        "background-position": "left top"
    });
});

如何在此脚本中添加动画？谢谢！

Answer 1

您可以简单地使用 css 来完成，而无需修改您的代码：

#bottom-a .responsive .mod-icon {
    background-image:url('imgurl.jpg');
    transition: background 2s;
    -moz-transition: background  2s; /* Firefox 4 */
    -webkit-transition: background 2s; /* Safari and Chrome */
    -o-transition: background 2s; /* Opera */
}

Answer 2

$('#bottom-a .module.responsive').hover(function () {
    $('#bottom-a .responsive .mod-icon').animate({
        "background-position": "left bottom"
    },1000);
}, function () {
    $('#bottom-a .responsive .mod-icon').animate({
        "background-position": "left top"
    },1000);
});