jquery 애니메이션 배경 위치

jquery 애니메이션 배경 위치

---

이 작업을 수행 할 수없는 것 같습니다.

$('#product_family_options_dd').animate({
  height: '300px',
  width: '900px',
  backgroundPosition: '-20px 0px',          
},

높이와 너비는 애니메이션이 적용되지만 배경에는 적용되지 않습니다.

---

다음과 같이 별도의 값을 사용하는 경우 배경 애니메이션 플러그인을 사용할 필요가 없습니다.

$('.pop').animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');

---

단일 값을 기대하기 때문일까요?

jQuery 의 애니메이션 페이지에서 가져온 것입니다 .

애니메이션 속성 및 값

아래에 언급 된 경우를 제외하고 모든 애니메이션 속성은 단일 숫자 값으로 애니메이션되어야합니다. 숫자가 아닌 대부분의 속성은 기본 jQuery 기능을 사용하여 애니메이션 할 수 없습니다. 예를 들어 너비, 높이 또는 왼쪽은 애니메이션 할 수 있지만 배경색은 애니메이션 할 수 없습니다. 속성 값은 달리 지정하지 않는 한 픽셀 수로 처리됩니다. 해당되는 경우 em 및 % 단위를 지정할 수 있습니다.

---

jQuery는 기본적으로 이것을 지원하지 않기 때문에 지금까지 찾은 최고의 솔루션 은 jQuery에서 자신의 CSS 후크 를 정의하는 것 입니다. 본질적으로 이것은 jQuery.animate ()와 함께 작동하는 CSS 값을 가져오고 설정하는 사용자 정의 메소드를 정의하는 것을 의미합니다.

이미 github에 매우 편리한 구현이 있습니다 : https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js

이 플러그인을 사용하면 다음과 같이 할 수 있습니다.

$('#demo1').hover(
  function() {
    $(this).stop().animate({
      backgroundPositionX: '100%',
      backgroundPositionY: '100%'
    });
  },
  function () {
    $(this).stop().animate({
      backgroundPositionX: '105%',
      backgroundPositionY: '105%'
    });
  }
);

나를 위해 이것은 IE6 +를 포함하여 지금까지 테스트 된 모든 브라우저에서 작동했습니다.

나는 얼마 전에 빠른 데모를 온라인에 올렸으며 추가 지침이 필요하면 분리 할 수 ​​있습니다.

---

jQuery의 애니메이션 기능은 DOM 객체의 속성을 직접 애니메이션하는 데만 사용할 수 없습니다. 변수를 트위닝하고 step 함수를 사용하여 트윈의 모든 단계에 대한 변수를 가져올 수도 있습니다.

예를 들어 background-position (0px 0px)에서 background-position (100px 500px)으로 background-position을 애니메이션하려면 다음과 같이 할 수 있습니다.

$({temporary_x: 0, temporary_y: 0}).animate({temporary_x: 100, temporary_y: 500}, {
    duration: 1000,
    step: function() {
        var position = Math.round(this.temporary_x) + "px " + Math.round(this.temporary_y) + "px";
        $("#your_div").css("background-position",  position);
    }
});

이것을 잊지 않도록하십시오 . 단계 기능 내부.

---

jQuery 코드에서 backgroundPosition 부분 뒤에 쉼표가 있습니다.

backgroundPosition: '-20px 0px',

그러나 .animate () 메서드 (및 유사한 메서드)에서 변경하려는 다양한 속성을 나열 할 때 중괄호 사이에 나열된 마지막 인수 뒤에 쉼표가 없어야합니다. 그것이 배경 위치가 변경되지 않는 이유인지는 말할 수 없지만 오류이며 수정을 제안합니다.

업데이트 : 지금까지 수행 한 제한된 테스트에서 순수한 숫자 값 ( "px"없이)을 입력하면 .animate () 메서드의 backgroundPosition에서 작동합니다. 즉, 다음과 같이 작동합니다.

backgroundPosition: '-20 0'

그러나 다음은 그렇지 않습니다.

backgroundPosition: '-20px 0'

도움이 되었기를 바랍니다.

---

수학 조합 "-="을 사용하여 배경을 이동할 수도 있습니다.

$(this).animate( {backgroundPositionX: "-=20px"} ,500);

---

간단한 jquery의 Animate는 2 개의 값을 포함하므로이를 수행하는 데 사용할 수 없습니다.

이를 해결하려면 Background Position Plugin을 포함하고 원하는대로 배경 을 애니메이션 할 수 있습니다.

---

시험 backgroundPosition:"(-20px 0)"

다시 확인하기 위해 이것을 백그라운드 위치 플러그인 을 참조하고 있습니까?

배경 위치 플러그인을 사용하는 jsfiddle의 예입니다 .

---

You can change the image background position using setInterval method, see demo here: http://jquerydemo.com/demo/animate-background-image.aspx

---

I have a div My_div 250px x 250px, a background image also 250 x 250

css:

#My_div {
    background: url("..//img/your_image.jpg") no-repeat;
    background-position: 0px 250px;
}

javascript:

$("#My_div").mouseenter(function() {
    var x = 250;
    (function animBack() {
        timer = setTimeout(function() {
            if (x-- >= 0) {
                $('#My_div').css({'background-position': '0px '+x+'px'});;
                animBack();
            }
        }, 10);
    })();

});
$("#My_div").mouseleave(function(){
    $('#My_div').css({'background-position': '0px 250px'}); 
    clearTimeout(timer);
}); 

I hope it help

---

Using Firefox:
specifying two values: Doesn't work with any combination of syntax -- as several pointed out above. Using Firebug, I get "Error in parsing value for 'background-position'. Declaration dropped." until the animation ends.

'backgroundPosition': '17.5em' -- specifiying 1 value: works in FF and CHrome OPera, SF(Safari) and IE, with a caveat that the 2nd value or y position (vertical) gets set to "center". From Firebug, the element's style gets set to:
style="background-position: 17.5em center;"

---

function getBackgroundPositionX(sel) {
    pos = $(sel).css('backgroundPosition').split(' ');
    return parseFloat(pos[0].substring(0, pos[0].length-2));
}

This returns [x] value. Length of number has no matter. Could be e.g. 9999 or 0.

참고URL : https://stackoverflow.com/questions/5171080/jquery-animate-background-position