Jquery动画背景

Question

我正在使用jquery在悬停主div时更改子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);
});