Simple jQuery script required to create show/hide continuous loop

Question

I have to the best of my knowledge researched the questions on this forum, but not quite got the answer.
I am a newbie in terms of jQuery.
I have got this div

<div id="main">
    <div id="1" class="trip">Item1</div>
    <div id="2" class="trip">Item2</div>
    <div id="3" class="trip">Item3></div>
</div>

And I want to fade in each div in turn, then hide and fade in the next div.
I want this to do a continuous loop through the divs until the visitor leaves the page.
I need step by step help to achieve this.
I am new on stackoverflow, but I learn fast so bear with me :)

Any help is much appreciated.
//Ot_Gu

Please try to write the code yourself first and post the attempt here when you're stuck — Beat
– Beat, Commented May 30, 2013 at 6:12
55 "best" carousel plugins: tripwiremagazine.com/2012/12/jquery-carousel.html - there is bound to be one in there that does exactly what you are looking for. — Tim Hobbs
– Tim Hobbs, Commented May 30, 2013 at 6:25

Ram · Accepted Answer · 2013-05-30 06:26:31Z

3

Create a function and use it as fadeOut's callback, the function will be called when an element is faded out.

var $elem = $('#main .trip'), l = $elem.length, i = 0;

function comeOn() {
    $elem.eq(i % l).fadeIn(700, function() {
        $elem.eq(i % l).fadeOut(700, comeOn);
        i++;
    });
}

http://jsfiddle.net/MtmxN/

edited May 30, 2013 at 6:26

answered May 30, 2013 at 6:14

Ram

145k16 gold badges174 silver badges201 bronze badges

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

3 Comments

Ot_Gu Over a year ago

...Is there a way to set a length of time before it starts fading out?

Ot_Gu Over a year ago

...and could this length of time be a variable - so that for example, if the div contained a video it could play to end and then fade out.

Ram Over a year ago

@Ot_Gu Yes, you can use delay method var d = 1000; $elem.eq(i % l).delay(d).fadeOut(700, comeOn); If it's a video you can call the function on it's end event.

Alvaro · Accepted Answer · 2013-05-30 06:34:47Z

This is my fiddle

function name_of_the_function() {
    $('.trip').each(function (index) { //for each element with class 'trip'
        $(this).delay(index * 1000).animate({ //delay 1000 ms which is the duration of the animation
            opacity: 1 //animate the opacity from 0 to 1
        }, {
            duration: 1000, //duration
            complete: function () { //when the animation is finished
                $(this).css({
                    opacity: 0 //turn the opacity from 1 to 0 without animation
                });
                if (index == 2) { //if the index == 2 which means we are in the last element in this case as we have 3 elements (0,1,2)
                    name_of_the_function(); //go back to the function
                }
            }
        });

    });
}

name_of_the_function(); //call the function at first

and the css I used:

.trip {
    opacity:0;
    background:red;
    height:100px;
    width:100px;
}

Fallexe · Accepted Answer · 2013-05-30 06:33:38Z

0

Here is how to do it using recursion with a list of element IDs for a more flexible solution.

var ids = ["#1","#2","#3"],
    time = 1000;


function cycleShowHide (i,ids,time) {
    if (i>=ids.length) {
        i = 0;
    }
    //hide previous
    if (i==0) {
        $(ids[ids.length-1]).hide(time);
    } else {
        $(ids[i-1]).hide(time);
    }
    //show next and repeat
    $(ids[i]).show(time, function(){
        i++;
        cycleShowHide(i);
    }
}

cycleShowHide(0,ids,time);

answered May 30, 2013 at 6:33

Fallexe

5962 silver badges11 bronze badges

Comments

M.B Kakadiya · Accepted Answer · 2013-05-30 06:12:12Z

-2

you can use jquery toggle

<div id="main" style='display:none'>
     <div id="1" class="trip">Item1</div>
     <div id="2" class="trip">Item2</div>
     <div id="3" class="trip">Item3></div> 
</div>
<button id='mb'>Chick here</button>

write in script tag..

 $("#mb").click(function(){
     $('#main').toggle();
 });

answered May 30, 2013 at 6:12

M.B Kakadiya

5761 gold badge5 silver badges18 bronze badges

Collectives™ on Stack Overflow

Simple jQuery script required to create show/hide continuous loop

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related