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);
});