의 jQuery 애니메이션() backgroundPosition가 작동하지 미세

Question

나는이 간단한 HTML이 :

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

일부 자바 스크립트 : 함수가 작업이 올바르게 때 마우스 오버

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

그래서 애니메이션이 너무 아니지만을 완벽한 멋지고 편안한 것은 거의 볼 수 없습니다 .. 그러나 mouseout 기능이 작동하지 않을 때 배경 이미지는 픽셀 위에도 움직이지 않습니다.

화 그게 문제 야? 나는 무엇을 놓쳤는가?

OR은 :

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

이는 크롬에서 작동 ...

그래서 다시 문제가 무엇! 벌레가 뭐지! 나는 무엇을 그리워 하느냐?! 나는 표준 CSS는 크롬처럼이를 background-position-x 및 background-position-y, 몇 지원을 지원하지 않습니다 http://archive.plugins.jquery.com/project/backgroundPosition-Effect

를 사용 -

Answer 1

내가 jQuery를 기본이 될 배경의 위치에 애니메이션을 적용 할 수 있다고 생각하지 않습니다.

jQuery의 animate() 메서드는 동시에 두 값의 애니메이션을 지원하지 않으므로 언젠가는 오류가되거나 일부 브라우저에서는 아무 것도하지 않습니다.

결국, 이것을 확인하십시오 http://snook.ca/archives/javascript/jquery-bg-image-animations. 배경 위치를 움직이기 원한다면 잘 작동하는 jQuery.bgpos.js이라는 jQuery 플러그인이 있어야합니다.

코드는 다음과 같다 : 당신이 jQuery로 무거운 손으로 접근 방식을 사용하고 같은

(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

이 보인다.

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

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

배경 위치 변경

은 최신 브라우저에서 애니메이션됩니다 그냥 IE8과 아래 정적 변화 될 것입니다 :이 혼자 CSS로 수행 할 수 있습니다.

당신은뿐만 아니라 다른 브라우저에게 transition 재산의 특정 접두사 버전을 추가 할 수 있습니다 :

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