Цикл jQuery Animaton, после завершения, снова и снова?

Question

Я создаю сайт, для которого необходим эффект ЭЛТ старой школы. У меня есть tv статическая работа красиво, но мне нужен толстый экран искажения, чтобы двигаться вверх и вниз.

Для этого я сделал div с шириной 100%, ростом 200px, что я хотел начать в верхней части страницы, спуститься вниз и, ударив нижнюю часть, застегнуть молнию назад, затем начать все сначала ,

У меня есть работа до цикла. Он перемещается вниз, сбрасывается на верх, а затем я хочу, чтобы функция анимации повторялась.

Вот мой код:

$(document).ready(function() 
{ 
    //vars 
var windowHeight = $(window).height(); 
var lineHeight = $('#bar').height(); 
var desiredBottom = windowHeight - lineHeight; 
var newPosition = desiredBottom; 
var moving = $('#bar'); 

animate_loop = function() 
{ 
//FUNCTION ACTIONS 
moving.animate({top:newPosition}, 
{ 
    duration: 2000, 
    complete: function() 
    //function on completion - reset to top 
    { 
     $('#bar').animate({top:0},100); 

    } 


}); 

}//end of animate_loop = function() 

animate_loop(); 

});// end of document ready 

Мой бар движется вниз в то время я поставил его анимировать для, она молниеносно назад к вершине безупречно, но .... ничего. Я попробовал несколько методов до этого, но потом я увидел поток цикла анимации здесь, который был изложен таким же образом. Может кто-то указать, почему моя анимация не будет зацикливаться, когда я пытаюсь выполнить «animate_loop();» близко к концу?

Answer 1

Вы можете использовать встроенный вызов функции в .animate(), когда анимация завершена. Как это:

$(document).ready(function() { 
    //vars 
    var windowHeight = $(window).height(); 
    var lineHeight = $('#bar').height(); 
    var desiredBottom = windowHeight - lineHeight; 
    var newPosition = desiredBottom; 
    var moving = $('#bar'); 
    animate_loop = function() { 
     //FUNCTION ACTIONS 
     moving.animate({ 
      top: newPosition 
     }, { 
      duration: 2000, 
      complete: function() 
      //function on completion - reset to top 
      { 
       $('#bar').animate({ 
        top: 0 
       }, 100, animate_loop); 
     } 
     }); 
} //end of animate_loop = function() 
animate_loop(); 
}); // end of document ready 

Answer 2

animate_loop = function() { 
    //FUNCTION ACTIONS 
    moving.animate({ top: newPosition },{ 
     duration: 2000, 
     complete: function() { //function on completion - reset to top 
      $('#bar').animate({ top: 0 }, 100, function() { 
       animate_loop(); // <-- 
      }); 
     } 
    }); 
} 

Вы просто должны назвать это снова в конце.

Answer 3

Опуская ваш документ, готовый обработчик и конфигурации переменных для ясности, самый простой вариант для самого кода анимации просто завершение обратного вызова в сочетании с немедленно вызываемой функции выражения

(function loop() { 
    moving.animate({top: newPosition}, 2000) 
      .animate({top: 0}, 100, loop); 
})(); 

Это четыре строки блок кода запустится автоматически (т. е. не будет необходимости в отдельном явном вызове), не создаст новых переменных (loop будет виден только в объеме) и не использует дополнительных таймеров.