if css (background-position) jquery 조건문

Question

현재 위치에 따라 다양한 크기의 픽셀로 내 웹 사이트의 배경 이미지에 애니메이션을 적용하고 있습니다. 'if'문을 만들었지 만 문단을 전혀 무시하고

if ($("#bg").css("background-position") 

부분을 완전히 무시하고 있습니다. Firefox 에서조차도 애니메이션은 정상적으로 작동합니다. 문제는 두 번째 조건이 무시되고 항상 670px만큼 이동한다는 것입니다. 예를 들어 높이와 같은 다른 CSS 값을 조건에 넣으면 작동합니다.

$(function() { 
    if ($("#bg").css("background-position") == "0px 0px") { 
     $("#arrows .right").click(function(){ 
     $("#bg").animate({backgroundPosition:"-=670 0px"}, 4000); 
     }); 
    } 
    else if ($("#bg").css("background-position") == "-670px 0px") { 
     $("#arrows .right").click(function(){ 
     $("#bg").animate({backgroundPosition:"-=1000 0px"}, 4000); 
     }); 
    }; 
}); 

은 조건문에서 작동하지 않는 배경 위치입니까?

나는 배경은 위치에 따라 링크를 변경하려고이 완전히 무시된다 :

$(function() { 
    if ($("#bg").css("background-position") == "-670px 0px") { 
     $("#cafe a").attr("href", "http://mywebsite.com/about-us/") 
    }; 
}); 

Answer 1

난 그냥 내가 정말 제대로 질문에 대한 답을 해본 적이 있기 때문에,이 두 가지를 언급하고 싶었다. 나는 그저 주변에있다.

1. 당신의 jsfiddle에 문제

---

잘 당신이 그것에 jQuery를 추가 깜빡이었다 ... 그리고 그것은뿐만 아니라 실제 코드의 문제를 가지고 있었다.

두 번째 클릭 후 기대 값 -670px 0px가되었지만이 값은 실제로 -670px 50%입니다. y을 애니메이트하려고 시도조차하지 않았지만 첫 번째 애니메이션은 0에서 50 %로 바뀌 었습니다.

jquery가 백그라운드 위치 애니메이션을 기본적으로 지원하지 않기 때문에 심지어 분석해야하는지 잘 모르겠습니다.

2. 당신은 이미 귀하의 웹 사이트에 해당 플러그인이 있다고 말했고, 그 문제는 플러그인이 backgroundPosition이라는 단수의 수치를 이해하지 못한다고 생각한 것 같습니다.

원본 jsfiddle을 가져 와서 플러그인을 추가하고 애니메이션에 두 번째 값을 추가하여 작업을 시작했습니다.

jsfiddle of that

---

내가 코멘트에 당신을 준 jsfiddle

은 조금 더 컴팩트 제외하고 내가 위에 링크 된 것과 기본적으로 동일하다.

/* http://keith-wood.name/backgroundPos.html 
    Background position animation for jQuery v1.1.1. 
    Written by Keith Wood (kbwood{at}iinet.com.au) November 2010. 
    Available under the MIT (https://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt) license. 
    Please attribute the author if you use it. */ 
(function($){var g=!!$.Tween;if(g){$.Tween.propHooks['backgroundPosition']={get:function(a){return parseBackgroundPosition($(a.elem).css(a.prop))},set:setBackgroundPosition}}else{$.fx.step['backgroundPosition']=setBackgroundPosition};function parseBackgroundPosition(c){var d=(c||'').split(/ /);var e={center:'50%',left:'0%',right:'100%',top:'0%',bottom:'100%'};var f=function(a){var b=(e[d[a]]||d[a]||'50%').match(/^([+-]=)?([+-]?\d+(\.\d*)?)(.*)$/);d[a]=[b[1],parseFloat(b[2]),b[4]||'px']};if(d.length==1&&$.inArray(d[0],['top','bottom'])>-1){d[1]=d[0];d[0]='50%'}f(0);f(1);return d}function setBackgroundPosition(a){if(!a.set){initBackgroundPosition(a)}$(a.elem).css('background-position',((a.pos*(a.end[0][1]-a.start[0][1])+a.start[0][1])+a.end[0][2])+' '+((a.pos*(a.end[1][1]-a.start[1][1])+a.start[1][1])+a.end[1][2]))}function initBackgroundPosition(a){a.start=parseBackgroundPosition($(a.elem).css('backgroundPosition'));a.end=parseBackgroundPosition(a.end);for(var i=0;i<a.end.length;i++){if(a.end[i][0]){a.end[i][1]=a.start[i][1]+(a.end[i][0]=='-='?-1:+1)*a.end[i][1]}}a.set=true}})(jQuery); 

// On document ready 
$(function() { 

    // When #arrows element is clicked... 
    $("#arrows").on("click", function() { 

      // Get the background position. 
     var bgPos = $("#bg").css("background-position"), 
        // These two are ternary if statements.. 
        // In human language these would be: 
        // if bgPos is equal to '0px 0px', use "-=670px 0px" OR.... 
        // if bgPos is equal to '-670px 0px', use "-=1000px 0px" 
      newPos = (bgPos === '0px 0px') && "-=670px 0px" || 
        (bgPos === '-670px 0px') && "-=1000px 0px"; 

     // Console logs that help keep track of what is happening. 
     console.log('Background position: ' + bgPos); 
     console.log('If statement #1: ' + (bgPos == '0px 0px')); 
     console.log('If statement #2: ' + (bgPos == '-670px 0px')); 

     // Animate #bg... 
     $("#bg").animate({ 
      backgroundPosition: newPos 
     }, 4000); 

    }); 

});