jQuery изменить положение фона CSS и наведение курсора / мыши

Question

У меня есть меню, состоящее из одного изображения (например, спрайтов). Чтобы отобразить изображение при наведении, я просто перемещаю фоновое изображение вниз. Я бы хотел, чтобы этот эффект контролировался jQuery и анимирован.

Это образец меню.

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

Это то, с чем я играю. Я очень плохо знаком с jQuery и у меня проблемы с запуском правильного селектора.

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

 });

Не могли бы вы указать, что я делаю неправильно? Я знаю, что селектор, вероятно, неправильный, но мне трудно понять, как манипулировать якорем.

Answer 1

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

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

Answer 2

{backgroundPosition: "(0 -54px)"

(Вам не нужны скобки. В правиле CSS background-position нет скобок.)

В любом случае jQuery не знает, как анимировать составное значение, например backgroundPosition. В IE вы получаете доступ к нему с помощью backgroundPositionY, который, как простое значение, jQuery может анимировать. Однако это нестандартно и не будет работать в других местах.

Вот плагин , который утверждает, что исправил это.

Answer 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;
}

Answer 4

         $('#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. Надеюсь, это поможет.

Answer 5

Я бы предположил, что ваш фон связан с 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})
   })

 });