CODEWITHSUNDEEP
jquerycssjquery-animate
Grufas
Grufas

Reputation: 1450

Jquery animate background

i am using jquery to change child div's background when hovering main 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"
    });
});

How to add animation to this script? Thanx!

Upvotes: 0

Views: 207

Answers (2)

obe6
obe6

Reputation: 1881

You can do it simply with css without modifying your code :

#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 */
}

Upvotes: 1

ygssoni
ygssoni

Reputation: 7349

$('#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);
});

Upvotes: 0

Related Questions