CODEWITHSUNDEEP
jquerydelayshoweachslide
user1270589
user1270589

Reputation:

use hide/show in jquery each

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

Upvotes: 3

Views: 13141

Answers (4)

Patrick Lee Scott
Patrick Lee Scott

Reputation: 8729

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

Upvotes: 3

adeneo
adeneo

Reputation: 318342

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

Upvotes: 0

Belladonna
Belladonna

Reputation: 3862

Because it's delaying from the same point, if you put the delay in the right place.

$(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);
    });
});

Do you want to hide it a second time after you show it? I removed that, since it would just show then hide.

Shortened version:

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

Upvotes: 4

bvulaj
bvulaj

Reputation: 5133

Check out using .throttle instead.

Upvotes: 0

Related Questions