Geek Answers Handbook

JQuery CSS and mouse / mouse background reposition

I have a menu consisting of a single image (e.g. sprites). To display the hover image, I simply move the background image down. I would like this effect to be controlled by jQuery and animated.

This is an example of a menu item.

 <ul>
  <li id="home"><a href="#"></a></li>
 </ul>

This is what I play with. I am very new to jQuery and I have problems with the correct selector.

 $(document).ready(function(){

  $('#home a');

   // Set the 'normal' state background position
   .css( {backgroundPosition: "0 0"} )

   // On mouse over, move the background
   .mouseover(function(){
    $(this).stop().animate({backgroundPosition:"(0 -54px)"}, {duration:500})
   })

   // On mouse out, move the background back
   .mouseout(function(){
    $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
   })

 });

Could you please indicate what I am doing wrong? I know that the selector is probably wrong, but it's hard for me to figure out how to manipulate the anchor.

+5
source share
5 answers

— , , , - — - :

$(document).ready(function(){
  $('#home a')
    // On mouse over, move the background on hover
   .mouseover(function() {
     $(this).css('backgroundPosition', '0 -54px');
   })
   // On mouse out, move the background back
   .mouseout(function() {
     $(this).css('backgroundPosition', '0 0');
   })
 });

, , CSS "".

$(document).ready(function(){
  $('#home a')
   // On mouse over, move the background on hover
   .mouseover(function(){
     $(this).stop().animate({backgroundPosition: "0 -54px"}, 500);
   })
   // On mouse out, move the background back
   .mouseout(function(){
      $(this).stop().animate({backgroundPosition: "0 0"}, 500);
   })
 });

, , jQuery "backgroundPosition" , "animate()", jQuery .

: : http://snook.ca/archives/javascript/jquery-bg-image-animations/

+13

{backgroundPosition: "(0 -54px)"

( , . CSS background-position.)

jQuery , , backgroundPosition. IE backgroundPositionY, , , jQuery. .

, , .

+3

( css)

.maintopbanner a:hover{
    background-position: -200px 0 !important;}
.maintopbanner a {
 -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
}
+2

, li?! this a , , ,

$(document).ready(function(){

  $('#home a')

   // On mouse over, move the background on hover
   .mouseover(function(){
    $(this).parent().stop().animate({backgroundPosition:"(0 -54px)"}, {duration:500})
   })

   // On mouse out, move the background back
   .mouseout(function(){
    $(this).parent().stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
   })

 });
0
         $('#home a')
.mouseenter(function(){
        $(this).parent().stop().animate({backgroundPosition:"(0 -54px)"},500)
       })
.mouseleave(function(){
        $(this).parent().stop().animate({backgroundPosition:"(0 0)"},500)
       })

// MouseEnter MouseLeave, , jQuery. , .

0

More articles:


All Articles