setTimeout/pausing/etc

Question

Я пробовал несколько разных способов, кроме правильного.

Попытка это:

setTimeout(function() { 
    $('.historyTextBoxes p') 
    .bind('showText', function(e) { 
     $(this).fadeIn(800, function(){ 
      $(this).next().length && $(this).next().trigger("showText"); 
     }); 
    }).eq(0).trigger('showText'); 
}, 4000); 

будет ждать в течение 4 секунд, а затем исчезают каждый параграф, один за другим со скоростью .800 миллисекунды.

То, что я хочу сделать, это увядает пункт в на .800 мс, а затем ждать в течение 4 секунд до следующего пункта выцветает

Базовый комплект план:.

$('.historyTextBoxes p') 
.bind('showText', function(e) { 
    $(this).fadeIn(800, function(){ 
     $(this).next().length && $(this).next().trigger("showText"); 
     alert('pause here'); 
    }); 
}).eq(0).trigger('showText'); 

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

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

Таким образом, в псевдокоде, я пытаюсь определить что-то вроде:

function wait() { 
    pause(for 4 seconds); 
} 

Тогда я мог бы просто назвать эту функцию вместо вышеуказанного предупреждения. Мои проблемы с setTimeout были «иметь» для определения функции, но я над чем-то думаю.

Answer 1

Использование setTimeout было верным, но вы применили его не в том месте.

$('.historyTextBoxes p').bind('showText',function(e) { 
    $(this).fadeIn(800,function(){ 
    // this is the callback after the fadein 
    // here we want to wait (use a timeout) 
    var next = $(this).next(); 
    if (next.length) 
     setTimeout(function() { 
     // before the next text is shown 
     next.trigger("showText"); 
     }, 4000); 
    }) 
}).eq(0).trigger('showText'); 

Answer 2

Это следует сделать это:

function showAll() { 
    var p = $('.historyTextBoxes p').get(); // array of elements 

    (function loop() { 
     if (p.length) { 
      var el = p.shift(); 
      $(el).fadeIn(800).delay(4000).promise().done(loop); 
     } 
    })(); 
} 

демо на http://jsfiddle.net/4dNr3/2/

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