jQuery background-position слева направо, справа налево

Question

Я хочу анимировать положение фона элемента слева направо, справа налево (или наоборот) и продолжать его повторять. Я сделал это, но неправильно.

1. Код грязен

2. фон положение Элемента делает остановку анимации через некоторое время.

   window.setInterval(function(){ 
       if($(element).css("background-position") == posRight + "px 50%"){ 
        move("left"); 
       } else if($(element).css("background-position") == posLeft + "px 50%"){ 
        move("right"); 
       } 
   }, 500); 
   

Я уверен, что проблема заключается в setInterval, но я не знаю, что я могу использовать вместо этого. Если я не использую интервал, if-statement не проверяется (или только один раз). Если я уменьшу интервал времени, он просто не сработает, потому что if-statement проверяет, находится ли позиция в X, но позиция начинается с X, поэтому ничего не делает.

Где я говорю? Fiddle: http://jsfiddle.net/8eS3a/1/

Что мне нужно? Обходной путь для setInterval.

Вы можете изменить градиент на фоновое изображение, чтобы увидеть, что происходит. Я использовал градиент, потому что иногда изображения удаляются.

Answer 1

Используйте функцию обратного вызова, встроенный в animate(), например, так:

function changePos(element, posLeft, posRight, duration) { 
    var state = $(element).data('state'), 
     pos = state ? posRight : posLeft; 

    $(element).animate({backgroundPosition: pos}, duration, function() { 
     changePos(element, posLeft, posRight, duration); 
    }).data('state', !state); 
} 

changePos("#elem1", 0, 40, 300); 
changePos("#elem2", 0, 40, 600); 

FIDDLE