2014-02-01 2 views
-1

Все, что я хотел бы сделать, это то, что эта функция заканчивается только перезапуском или созданием цикла. пожалуйста, помогите, thx. =)jQuery Функция перезапуска или цикла

это мой код:

$(function() { 
    $('#text').hide(); 
    $('#text').delay(600).fadeIn(1500).delay(9000).fadeOut(2000); 
    $('#text2').hide(); 
    $('#text2').delay(13500).fadeIn(1500).delay(9000).fadeOut(2000); 
    $('#text3').hide(); 
    $('#text3').delay(26500).fadeIn(1500).delay(9000).fadeOut(2000); 
}); 
+0

Почему вы используете документ готовый обработчик дважды – Rimpy

+0

я получил код от некоторых, где еще, но им также новое во всем этом, в основном обучение у мастеров =) – Haroldo

ответ

0

Оба fadeIn и fadeOut принимает функцию обратного вызова, сек ond, который выполняется после завершения анимации. Вы можете воспользоваться этой функцией, поставив динамические части вашего перехода в массив. В моем коде я создал функцию, которая запускает переходы, а затем вызывает рекурсивно через функцию обратного вызова. С каждой рекурсией следующий индекс передается как аргумент, который используется для извлечения информации о переходе из массива.

$(function() { 
    $('#text, #text2, #text3').hide(); 
    var transitions = [ 
     {id: 'text', delay: 600}, 
     {id: 'text2', delay: 13500}, 
     {id: 'text3', delay: 26500} 
    ]; 

    function perform(i){ 
     $('#' + transitions[i].id).delay(transitions[i].delay).fadeIn(1500).delay(9000).fadeOut(2000, function(){ 
      perform(++i % transitions.length); 
     });  
    } 
    perform(0);       
}); 

JS Fiddle:http://jsfiddle.net/z5Wcd/

+0

Кевин, большое спасибо за вашу помощь, это действительно разрешает мою проблему. Здорово. Еще раз спасибо, сегодня я узнаю что-то новое. – Haroldo

+0

@ Haroldo Glad Я мог бы помочь. –

+0

Это красиво сделано, прежде всего '' '' для исключения цикла 'for'. Но проверьте мою '.promise()' часть на будущее. @Haroldo – loveNoHate

0
$(function() { 
    function loop() { 
    $('#text').hide(); 
    $('#text').delay(600).fadeIn(1500).delay(9000).fadeOut(2000); 
    $('#text2').hide(); 
    $('#text2').delay(13500).fadeIn(1500).delay(9000).fadeOut(2000); 
    $('#text3').hide(); 
    $('#text3').delay(26500).fadeIn(1500).delay(9000).fadeOut(2000); 
    $('classOrTagThatEveryElementHas').promise().done(loop); 
    } 
    loop(); 
}); 

Документация:http://api.jquery.com/promise/

JS Fiddle:http://jsfiddle.net/RW22m/

Смежные вопросы