可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a menu composed of a single image (e.g., sprites). In order to display the hover image, I simply move the background image down. I'd like this effect to be controlled by jQuery and animated.

This is a sample menu item.

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

This is what I'm toying with. I'm very new to jQuery and am having problems getting the proper selector going.

 $(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 point out what I'm doing wrong? I know the selector is probably incorrect but I'm having a hard time figuring out how to manipulate the anchor.

回答1:

If you were not animating the transitions — and given the kinds of images I've grouped as sprites, I don't know why you'd ever do that — then you'd want something like this:

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

Now, if you are trying to animate that, then you've got bad syntax for the CSS and for the calls to "animate".

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

Again, I am doubtful that jQuery is going to be able to animate "backgroundPosition" for you, but then I don't do "animate()" very often and jQuery always manages to surprise me.

edit: here's a page: http://snook.ca/archives/javascript/jquery-bg-image-animations/

回答2:

{backgroundPosition:"(0 -54px)"

(You don't want the brackets there. There's no brackets in a CSS background-position rule.)

In any case jQuery doesn't know how to animate a compound value like backgroundPosition. In IE you get access to it with backgroundPositionY, which, as a simple value, jQuery can animate. However this is non-standard and won't work elsewhere.

Here's a plugin that claims to fix it.

answered Mar 25 '10 at 12:55

bobince

453k91 gold badges583 silver badges777 bronze badges

Yes I think that's referenced by that page I linked to my answer. – Pointy Mar 25 '10 at 12:57

add a comment |

i liked this method (just 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;
}

answered Dec 16 '13 at 11:39

Fedwar

255 bronze badges

add a comment |

I would imagine your background is bound to the li?! However this is set to the a of the selector, so if my assumption is correct you would need to change your code to

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

 });

answered Mar 25 '10 at 12:43

harpax

3,8825 gold badges30 silver badges46 bronze badges

The background is in fact set on the anchor due to a limitation in IE6. I wish I could simply set it to the list item but it would completely break in IE. – steelfrog Mar 25 '10 at 12:48

add a comment |

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

//Use MouseEnter and MouseLeave whenever possible and you do not need to type out duration with the current version of jQuery. Hope this helps.

answered May 16 '10 at 6:43

nolan campbell

add a comment |

Your Answer

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.