Geek asks and answers

Animation background is not working properly.

I used to do this, but now it does not work for me ...

I have a container div and div inside with a partially transparent image. When the user hovers over the div container, I would like the background on this div to move 0px -56px. I tried this using animation, as I usually do, it doesn't work. Initially, my old script did not work in version 1.6, so I went back to 1.4.2, and it didn't make any difference, so maybe my code is just rubbish ...

$('.trans_bg').css({"background-position":"0 0"});
$('.trans_bg').hover(
function() {
    $(this).animate({backgroundPosition: "(0px -56px)"},{duration:300}); 
},
function(){
    $(this).animate({backgroundPosition: "(0px 0px)"},{duration:300});
})

Any ideas?

+3
source share
1 answer

Your code is almost right, just remove the parentheses when setting up a new position:

$('.trans_bg').css({ backgroundPosition: "0 0" });
$('.trans_bg').hover(function() {
    $(this).animate({ backgroundPosition: "0px -56px"}, 300);
}, function() {
    $(this).animate({ backgroundPosition: "0px 0px"}, 300);
});

But unfortunately jQuery cannot animate backgroundPosition initially.

: .

, !

0

More articles:


All Articles