jQuery Basic Animation Logic

Question

I'm working on a feature for a web site with these basic steps:
1) Animate in the first image
2) Animate in the caption
3) Show both for a specified amount of time
4) Animate out the caption
5) Animate out the image
6) Move on to the next list item (unless it's the last, then loop)

I've written a function to show the image & caption, the timer to show until, and the function to animate them out. I'm currently fighting with how to go about step #6 above.

Basic HTML structure is:

<ul>
    <li class="current">
        <img src="my_pic.jpg" />
        <div class="caption">This is my caption text.</div>
    </li>
    <li>
        <img src="my_pic.jpg" />
        <div class="caption">This is my caption text.</div>
    </li>
    <li>
        <img src="my_pic.jpg" />
        <div class="caption">This is my caption text.</div>
    </li>
</ul>

My Basic (informal syntax) Script is:

showCurrentListItem(); //Call the function that animates in the image & caption

setTimeout(function () { //Add a timer (Show for 5 seconds)
    hideCurrentListItem() //After 5 seconds, animate out the current list item
}, 5000)

I guess my main question is; how can I go about showing, then hiding the next list item after this first one completes? (& then resetting so that it loops once the last list item is reached)

Maverick · Accepted Answer · 2013-09-18 16:56:12Z

1

why don't you try it out with loop, something like :

var i = 0;
function ShowItem(){ // i be the index of image
// Write your code to animate
// image and caption
setTimeout(function(){ HideListItem(); }, 5000);
}

function HideItem(){
// Write Logic to Hide
// Image and Caption
i++;
if(i == 3) {// or whatever is the total count
i=0;
}
ShowItem();
}

edited Sep 18, 2013 at 16:56

answered Sep 18, 2013 at 16:44

Maverick

4781 gold badge3 silver badges13 bronze badges

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

2 Comments

TripsLeft Over a year ago

It looks like in this example that 'i' is being passed into the HideItem() function. Would this require me to loop through the list items and assign them to an array so that they can be targeted using 'i' or am I overcomplicating this?

Maverick Over a year ago

well, you dont need to pass i, i just change my code. Moreover, you get get li of any index by $("li").eq(i)

OneOfOne · Accepted Answer · 2013-09-18 16:56:31Z

0

Why not just use jQuery.animate?

$('ul').on('click', 'li', function() {
    $('.current').hide().removeClass('current');
    $(this).addClass('current');
    $(this).animate({
        opacity: 0.25,
        height: "toggle"
    }, 5000, function() {
        $(this).hide();
    });
});

answered Sep 18, 2013 at 16:56

OneOfOne

100k22 gold badges195 silver badges187 bronze badges

Collectives™ on Stack Overflow

jQuery Basic Animation Logic

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related