애니메이션 배경 위치가 작동하지 않습니다.

배경 위치에 애니메이션을 적용하고 싶지만 작동하지 않습니다. 이게 가능하면 내가 jQuery를이 background-position 애니메이션을 할 수 있다고 생각이애니메이션 배경 위치가 작동하지 않습니다.

<head> 
    <style> 
     .test{ background:#F00} 
    </style> 
    <script type="text/javascript" src="jquery-1.8.3.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      $('a').click(function(){ 
       $(this).animate({backgroundPosition:'-50px 10px'}, 200); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <a href="javascript:void(0)">click</a> 
    <div>check....</div> 
</body>

출처

2013-05-27 Carlos

가능한 복제본 [animate backgroundPosition] (http://stackoverflow.com/questions/6380904/animate-backgroundposition) –

플러그인을 사용하고 있습니까? –

GSAP에서는 독립 실행 형으로 처리 할 수도 있고 jQuery 플러그인을로드 할 수도 있습니다. 위의 코드는 정상적으로 작동합니다 (특수한 수정이 필요하지 않습니다. 멋진 발놀림이 필요하기 때문에 후드 아래에서 호환됩니다. IE의 맛). http://www.greensock.com/gsap-js/ – Jack

당신이 선택하면 jQuery animate page 당신은 그것을 읽을 수 있습니다

애니메이션을

모든 애니메이션 속성 s 아래 명시된 것을 제외하고는 단일 숫자 값으로 애니메이션 될 수 있습니다. 숫자가 아닌 대부분의 속성은 jQuery.Color() 플러그인을 사용하지 않는 한 기본 jQuery 기능을 사용하여 애니메이션으로 만들 수 없습니다 (예 : 너비, 높이 또는 왼쪽은 애니메이션으로 표시 할 수 있지만 배경색으로 표시 할 수 없음).

즉, 백그라운드 위치는 2 값을 사용합니다. 해결 방법은 값을 연결하는 것입니다. 방법 * 여기

난 당신이 개 값을 반전 한 수 *

$(this).animate({ 
    'background-position-x' : '-50px', 
    'background-position-y' : '10px' 
}, 200);

, 난 느릅 나무 하나가 x 기억하지 않고 하나를 이십 기가 바이트 결코는 y입니다.

편집

여기 파이어 폭스 나던 지원 background-position-x 및 y, 코드 때문에 그것을 해결하기 위해 :

이

var pos = {x : '', y : ''}; 
$('a').click(function(){ 
    var that = $(this); 
    that.animate({ 
     'background-position-x' : '-50px', 
     'background-position-y' : '10px' 
    },{ 
     duration : 200, 
     step : function(a,b){ 
     if(b.prop == "backgroundPositionX"){ 
      pos.x = a + b.unit 
     }else if(b.prop == "backgroundPositionY"){ 
      pos.y = a + b.unit 
     } 
     }, 
     progress : function(){ 
     that.css('background-position', pos.x + ' ' + pos.y); 
     } 
    }); 
});

출처

2013-05-27 13:53:21

모질라에서 작동하지 않습니다. – Carlos

예, 파이어 폭스가 지원하지 않지만 고쳐주었습니다. –

안녕하세요, 파이어 폭스에서 전혀 작동하지 않습니다. 하지만 지금은 .unit은 무엇을 위해 사용되고 어떤 값은 – Carlos

Working jsFiddle Demo

애니메이션을합니다.

a { 
    -webkit-transition: background-position 0.6s; 
    -moz-transition: background-position 0.6s; 
    -ms-transition:  background-position 0.6s; 
    -o-transition:  background-position 0.6s; 
    transition:   background-position 0.6s; 
}

을 그리고 단지 .css() 방법으로 jQuery를에 background-position을 변경 : 하나 개의 솔루션, CSS에 전환을 사용

$(function(){ 
    $('a').click(function(){ 
     $(this).css('background-position', '250px 250px'); 
    }); 
});

출처

2013-05-27 13:53:11

내가 여기 내가이 건너 온 곳 잊었지만

조금 퍼그 인 즉

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

그리고 사용 : 꽤 잘 트릭을 수행합니다

$(function(){ 
    $('a').click(function(){ 
     $(this).animate({backgroundPosition: "(-50px 10px)"}, 200); 
    }); 
});

출처

2013-05-27 19:05:22 faino

애니메이션 배경 위치가 작동하지 않습니다.

답변

관련 문제