Loop и Animate на основе Radio Button нажмите

Question

У меня есть следующий фрагмент кода, который прекрасно работает и вращает DIV через каждые 3 секунды

var $elements = $('#One, #Two, #Three, #Four'); 
function anim_loop(index) { 
    $elements.eq(index).fadeIn(1000, function() { 
     var $self = $(this); 
     setTimeout(function() { 
      $self.fadeOut(1000); 
      anim_loop((index + 1) % $elements.length); 
     }, 3000); 
    }); 
} 
anim_loop(0); 

Как я могу контролировать цикл, если бы я сделать это с помощью радио кнопок.

Смотрите этот пример http://jsfiddle.net/w5YHY/1/

Я хочу, чтобы петля должна продолжаться, но когда я нажимаю на 3-й радио, третий элемент #three должен показывать и цикл должен продолжать из четырех. Аналогично, щелкнув на 1-м радио, #One должен показать, и цикл должен начинаться со второго элемента

Answer 1

Вы можете использовать событие click, чтобы остановить цикл и перезапустить его с помощью нового индекса на основе выбранного вами радио.

Вот мой fiddle

Сначала я установить таймаут переменной, так что я мог бы очистить его от события щелчка.

var animLoop; // declared outside the function 

animLoop = setTimeout(function() { // set in the function 

Я изменил следующую строку.

$self.fadeOut(1000); 

Для этого необходимо правильно определить затухание div при вызове нового цикла.

$("div").fadeOut(1000); 

Тогда в случае щелчка на радиостанции я получить идентификатор радио, которое я установил, чтобы соответствовать правильный индекс из Див и передают его в новый anim_loop. Надеюсь, это то, что вы искали.

Ниже приведен код, основанный на вашей скрипке.

var $elements = $('#One, #Two, #Three, #Four'); 
var animLoop; 
function anim_loop(index) { 
    $elements.eq(index).fadeIn(1000, function() { 
     var $self = $(this); 
     $("#"+(index)).prop("checked", true); 
     animLoop = setTimeout(function() { 
      $("div").fadeOut(1000); 
      //$self.fadeOut(1000); 
      anim_loop((index + 1) % $elements.length); 
      $("input").prop("checked", false); 
      $("#"+(index +1)).prop("checked", true); 
     }, 3000); 
    }); 
} 

anim_loop(0); // start with the first element 
$("input").click(function() 
{ 
    $("div").fadeOut(); 
    clearTimeout(animLoop); 
    anim_loop(parseFloat($(this).attr("id")));  
});