verwenden verstecken/zeigen in jquery jeder

Question

dieser Code funktioniert nicht, wie ich es auflösen?

ich alles verstecken .. danach zeige ich eins nach dem anderen in einer Verzögerung von 7 Sekunden ..

aber alles gezeigt wird, ich verstehe nicht, warum

$(function() { 
    texts = $('.text-block'); 
    slide = $('#slideshow'); 


    // hide everything 
    texts.each(function() { 
     $(this).hide(); 
    }); 

    // show it once by once 
    jQuery.each(texts, function() { 
     $(this).show(300); 
     $(this).delay(7000); 
     $(this).hide(300); 
    }); 
}); 

Answer 1

Zunächst einmal, Sie don ‚t verwenden müssen .each,

texts = $('.text-block'); 
texts.hide(); // hides all matched elements 

Soweit Vorführungen jeweils eins nach dem anderen, wird die Verzögerung nicht die Ausführung des Threads js gesamten zu stoppen, das wäre blockiert und schlecht und Ihre applicatio machen n scheinen sehr unempfindlich zu sein. Um sie einzeln zu zeigen, müssten Sie es anders schreiben

Vielleicht eine rekursive Funktion, die Sie das nächste Element nach der Verzögerung übergeben, mit einem Versprechen zu wissen, wann die Animation und Verzögerung ist Komplett?

wie so:

http://jsfiddle.net/SbYTL/1/

function ShowItems(items, delay) { 
    $(items[0]).fadeIn(300) 
     .delay(delay) 
     .fadeOut(300) 
     .promise() 
     .done(function() { 
      items.splice(0, 1); 
      if (items.length > 0) 
      { 
       ShowItems(items, delay);  
      }    
    });  
} 

var items = $(".text-block").hide(); 
ShowItems(items, 7000); 

Answer 2

Weil es an der gleichen Stelle ist zu verzögern, wenn Sie die Verzögerung an der richtigen Stelle setzen.

$(function() { 
    texts = $('.text-block'); 
    slide = $('#slideshow'); 


    // hide everything 
    texts.hide(); 

    // show it once by once 
    texts.each(function(index) { 
     $(this).delay(7000 * index).show(300); 
    }); 
}); 

Möchten Sie es ein zweites Mal verstecken, nachdem Sie es zeigen? Ich habe das entfernt, da es sich dann nur ausblenden würde.

Verkürzte Version:

$(function() { 
    $('.text-block').each(function(index){ 
     $(this).hide().delay(7000 * index).show(300); 
    }); 
}); 

Answer 3

Check out mit .throttle statt.

Answer 4

$(function() { 
    $('.text-block').hide().each(function(item, index) { 
     $(item).delay(7000*index).show(300, function() { 
      $(this).delay(7000).hide(300); 
     }); 
    }); 
});