Jquery .each use. Queue?

Question

I have that code in jQuery:

function lshow() {
        var delayt = 500;
        var showtime = 5000;
        var ArrayOfElements = ['.slogan1','.whatwedo','.ekon','.ene', '.ekol', '.sm'];
        var i=0;

        $.each(ArrayOfElements,function (i,element) {
            if($(element).is(':visible')) {
                $(element).delay(delayt).hide('slow');
            }
            if ($(element).is(':hidden')) {
                $(element).delay(showtime).show('slow');
            }

        });
    }

and HTML:

<span class="slogan">
    <span class="slogan1">my slogan</span><!--Default visible-->
        <span class="whatwedo"><!--Default invisible-->
            projects <span class="sm">and modernization </span> of something <span class="ekon">fine</span>
        <span class="ene">fast</span>
        <span class="ekol">smooth</span>
    </span>
</span>

CSS:

.whatwedo, .sm, .ene, .ekol {
   display: none;
}

And I want to set it appear like that:

My slogan

fadeOut

projects of something fine

"fine" fadeOut "fast" fadeIn

projects of something fast

same thing

projects of something smoth
projects and modernization of something

But after 5 sec. it shows "projects and modernization of something fine fast smoth" and i cant get it working

ShankarSangoli · Accepted Answer · 2011-07-29 18:34:33Z

5

Try this http://jsfiddle.net/Kt38f/

 $(document).ready(function() {
    var delayt = 500;
    var showtime = 5000;
    var ArrayOfElements = ['.slogan1','.whatwedo','.ekon','.ene', '.ekol', '.sm'];
    var i=0;

            $('.slogan1').fadeOut(delayt, function(){        
                $(".whatwedo").fadeIn(showtime , function(){
                    $('.ekon').fadeOut(showtime , function(){ 
                        $('.ene').fadeIn(showtime, function(){
                            $('.ene').fadeOut(showtime, function(){ 
                                $('.ekol').fadeIn(showtime, function(){ 
                                   $('.sm').fadeIn(showtime);
                                });
                            });   
                        });
                    });
                });
            });         
});

edited Jul 29, 2011 at 18:34

answered Jul 28, 2011 at 21:37

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

anthony sottile Over a year ago

you could do it with $.when() and .then(), but you still end up with a lot of chained stuff...

Maszynka Over a year ago

Hmm not exactly. Span appear before the previous is hided so ther's a white space.

Felix Kling · Accepted Answer · 2011-07-29 19:11:03Z

Here is another way:

Instead of putting the elements in an array, you put the functions that should be executed in an array and process it using setTimeout:

function lshow() {
    var intv = 5000;
    var funcs = [
        function() {
            $('.slogan1').hide('slow');
            $('.whatwedo').show('slow');
        },
        function() {
            $('.ekon').hide('slow');
            $('.ene').show('slow');
        },
        function() {
            $('.ene').hide('slow');
            $('.ekol').show('slow');
        },
        function() {
            $('.sm').show('slow');
        }
    ];
    var i = 0;

    setTimeout(function() {
        var func = funcs[i];
        if(func) {
            i++;
            func();
            setTimeout(arguments.callee, intv);
        }
    }, intv);
}

DEMO

Kyle · Accepted Answer · 2011-07-29 19:54:08Z

I took a little bit of a different approach to it. Fiddle @ http://jsfiddle.net/SinS3i/xwc9a/1/

var currentStep = false;
var t = false;
ArrayOfElements = ['.slogan1','.whatwedo','.ekon','.ene', '.ekol', '.sm'];
var delayt = 500;
var showtime = 5000;
lshow = function(elements) {
    var lastStep = currentStep;
    currentStep = elements.shift();
    var hideIt = lastStep ? $(lastStep).has(currentStep).length === 0 : false;
    if(hideIt) {
        $(lastStep).fadeOut(showtime, function() {
            $(currentStep).fadeIn(showtime, function() {
                t = ArrayOfElements.length > 0 ? setTimeout("lshow(ArrayOfElements)", delayt) : false;                    
            });
        });
    } else {
        $(currentStep).fadeIn(showtime, function() {
            t = ArrayOfElements.length > 0 ? setTimeout("lshow(ArrayOfElements)", delayt) : false;
        });
    }
};
$(document).ready(function(){
    t = setTimeout("lshow(ArrayOfElements)", delayt);
});

Maszynka · Accepted Answer · 2011-07-29 20:06:19Z

0

Little bit edited (http://jsfiddle.net/dVJvc/):

EDIT: Sorry i didnt see yours responses. (THE CODE IS THAT SAME AS last ShankarSangoli)

edited Jul 29, 2011 at 20:06

answered Jul 29, 2011 at 20:00

Maszynka

212 bronze badges

1 Comment

Felix Kling Over a year ago

Is this an answer or an addition to your question? If the latter, please edit your question instead.

Collectives™ on Stack Overflow

Jquery .each use. Queue?

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related