Question

this code dont works, how i resolve it ?

i hide everything .. after this, i show one by one in a delay of 7 seconds..

but everything is showed, i dont understand why

$(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

First off, you don’t need to use .each,

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

As far as showings each one by one, the delay doesn’t stop the execution of the entire js thread, that would be blocking and bad and make your application seem very unresponsive.. To show them one by one you’d have to write it differently

Maybe a recursive function that you pass the next element in after the delay, using a promise to know when the animation and delay is complete?

like 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);