if css(background-position) jquery conditional statement

Question

I am animating background image on my website by various amount of pixels depending on current position. I created an 'if' statement but it completely ignores the

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

part, and is animating no matter what. Animation is working fine, even in Firefox, the problem is that the second condition is ignored and it always move by 670px. If i put into conditions other css value, like height for example, then it works.

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

is background-position not working in a conditional statement at all?

I also try to change link depending on background position, this is completely ignored:

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

Answer 1

I just wanted to mention these two things, since I never really tried to properly answer the question. I just kinda got around it.

---

1. The issue with your jsfiddle was that, well you forgot to add jquery in it... and it did have actual code issue as well.

You expected value -670px 0px after the second click, but it actually gave this value -670px 50%. The first animation, I guess, switched 0 to 50% even though you didn't even try to animate y.

I'm not sure if it even should be analyzed, since I guess jquery doesn't natively support background position animation.

2. You said you had that plugin already in your website and I think the issue with that was that the plugin doesn't understand singular numerical value with backgroundPosition.

I took your original jsfiddle, added the plugin and added second value to the animate and it started working.

jsfiddle of that

---

The jsfiddle I gave you in the comments is basically identical to what I linked above, except it's just a little more compact.

Jsfiddle of the compact working code

Here's the compact working code with comments:

/* 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);

    });

});