TimelineMax background position change

用TimelineMAX來寫動畫是一件很簡單的事情

不過在寫連續的動畫圖，卻遇到了麻煩

var tl = new TimelineMax({repeat:-1});
tl.to($('.Scroll'),0.1,{css:{'backgroundPosition':'-683px -222px'}});
tl.to($('.Scroll'),0.1,{css:{'backgroundPosition':'-693px -111px'}});
tl.to($('.Scroll'),0.1,{css:{'backgroundPosition':'-693px -0px'}});
tl.to($('.Scroll'),0.1,{css:{'backgroundPosition':'-595px -525px'}});
tl.to($('.Scroll'),0.1,{css:{'backgroundPosition':'-517px -525px'}});

如果這樣寫的時候，會發現background-position在變換的時候會由A點移動到B點， 而不是原本所預想的直接換background-position 試了很久終於想到可以用delay方式來處理就行了 所以正確的程式碼如下

var tl = new TimelineMax({repeat:-1});
tl.to($('.Scroll'),0,{css:{'backgroundPosition':'-683px -222px'}},'+=.1');
tl.to($('.Scroll'),0,{css:{'backgroundPosition':'-693px -111px'}},'+=.1');
tl.to($('.Scroll'),0,{css:{'backgroundPosition':'-693px -0px'}},'+=.1');
tl.to($('.Scroll'),0,{css:{'backgroundPosition':'-595px -525px'}},'+=.1');
tl.to($('.Scroll'),0,{css:{'backgroundPosition':'-517px -525px'}},'+=.1');