JQuery одушевленные() backgroundPosition не работает нормально

Question

У меня есть этот простой HTML:

<span class="coverImg" style="background-image:url('images/show2.jpg');"></span></a> 

и некоторые Javascript:

$(function() { 
      $(".coverImg").hover(function() { 
       $(this).animate({ 
        backgroundPosition : "0 0" 
       }, "fast"); 
      }, function() { 
       $(this).animate({ 
        backgroundPosition : "50% 50%" 
       }, "fast"); 
      }); 
     }); 

поэтому при наведении курсора мыши функция корректно работать, хотя анимация не так идеальный приятный и расслабляющий едва заметен .. , но когда мышь функция не работает, фоновое изображение просто сидит там, не двигаясь даже на пиксель ...

Wha Это проблема? Что я пропустил?

ИЛИ:

$(function() { 
      $(".coverImg").mouseover(function() { 
       $(this) 
       .animate({ 
        "background-position-x" : "-=20px", 
        "background-position-y" : "-=20px" 
       }, "fast"); 
      }).mouseout(function() { 
       $(this).animate({ 
        "background-position-x" : "0 ", 
        "background-position-y" : "0" 
       }, "fast"); 
      }) 
     }) 

это работает только в Chrome ...

так снова, что проблема! какая ошибка! что я пропустил ?!

Answer 1

Я не думаю, что JQuery можно анимировать фоновые позиции будут по умолчанию - я использую http://archive.plugins.jquery.com/project/backgroundPosition-Effect

Стандарт CSS не поддерживает background-position-x и background-position-y, только несколько поддержки этого, как Chrome.

И метод jQuery's animate() не поддерживает одновременную анимацию двух значений, он иногда будет ошибкой или просто ничего не делает в некоторых браузерах.

В конце концов, проверьте это http://snook.ca/archives/javascript/jquery-bg-image-animations. Должен быть плагин jQuery под названием jQuery.bgpos.js, который отлично работает, если вы хотите анимировать фоновое положение.

код выглядит так:

(function($) { 
$.extend($.fx.step, { 
    backgroundPosition : function(fx) { 
     if(fx.state === 0 && typeof fx.end == 'string') { 
      var start = $.curCSS(fx.elem, 'backgroundPosition'); 
      start = toArray(start); 
      fx.start = [start[0], start[2]]; 
      var end = toArray(fx.end); 
      fx.end = [end[0], end[2]]; 
      fx.unit = [end[1], end[3]]; 
     } 
     var nowPosX = []; 
     nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; 
     nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; 
     fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1]; 
     function toArray(strg) { 
      strg = strg.replace(/left|top/g, '0px'); 
      strg = strg.replace(/right|bottom/g, '100%'); 
      strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2"); 
      var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); 
      return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]]; 
     } 

    } 
});})(jQuery); 

Answer 2

Похоже, вы используете тяжелую руку подход с JQuery. Это можно сделать с помощью только CSS:

span { 
    background: url(yourimage.jpg) top left no-repeat; 
    transition: all 3s ease-in-out; 
} 

span:hover { 
    background-position: 50% 50%; 
} 

фона изменения позиции будет анимированным в современных браузерах и будет просто статическое изменение в IE8 и под.

Вы можете добавить другой браузер конкретных префиксов версии transition собственности, а также:

-webkit-transition: 
-moz-transition: 
-o-transition: 
transition: