Изменение положения изображения при наведении курсора на другое изображение

Не уверен, может быть вам полезно. Если бы вы не анимировали переходы - и учитывая типы изображений, которые я сгруппировал как спрайты, я не знаю, зачем вы когда-либо это делали - тогда вам бы потребовалось что-то вроде этого:

$(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 /