0

i am trying to change the background on hover of some divs, but for some reason i can not make it with jquery. what i want is give an effect that shows from the images to the image on hover, because with css the change is too fast and doesnt look good at all. any suggestion? this is my code

#siman{
    background: url(images/siman.png) left top no-repeat;
}
#vogue{
    background: url(images/vogue.png) top left no-repeat;
}
#consejo{
    background: url(images/consejodelcafe.png) top left no-repeat;
}
#digicel{
    background: url(images/digicel.png) top left no-repeat;
}
#siman:hover, #vogue:hover, #consejo:hover, #digicel:hover{
    background-position: left -96px
}
karlelizabeth
  • 157
  • 2
  • 3
  • 13
  • Is this what you're looking for? [Other answer](http://stackoverflow.com/questions/5171080/jquery-animate-background-position) – Trey Jun 17 '12 at 21:55

1 Answers1

0

cant you use the animate function?

you attach a hover listener on the images and on hover your function does

$(this).css('background-position', '0px 0px');
$(this).animate({

  'background-position-x': '-96px',
}, 10000, 'linear');
Baz1nga
  • 15,485
  • 3
  • 35
  • 61
  • so, my code should be something like this:$("#siman").hover( function(){ $(this).animate({ 'background-position-x': '-96px', }, 10000, 'linear'); } ); am sorry am just so new with jquery! – karlelizabeth Jun 17 '12 at 22:07