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.
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);
});
});