Hello.
I’m coding my own jquery “powerpoint” type slide presentation. I have a script that uses load() to bring in separate HTML files as the “slides” and it fades them in and out when you click the “next” or “previous” buttons.
To kick it up another notch, I’d like each element on the page to slide into place from the right (sliding left into final position). I’d like to slide every item in the parent div (#presentationContainer) with a class of “animElement” to use the “margin-left” css property to appear to slide into place as it fades.
So, each element with that class would animate one after another until each one is faded in and in correct position.
This is one hell of an example of event chaining and is a bit above my meddle. I just need help with the sliding part in the animation. The fades all work fine.
My question is, how will I handle the sliding and where in the even chain will I put that code? How do you target an item and intercept it when it isn’t on the page yet?
Here is the script for the .nextButton:
$(‘.nextButton’).click(function(){
if($currentSlide < $numberOfSlides) {
$currentSlide += 1;
$(‘#presentationContainer’).load(‘slide-’ + $currentSlide + ‘.html’).hide().fadeIn(1000);
}
});
I might need to start another statement. Not sure if all of this can be chained into just one. Here’s the offset for the sliding elements.
animate({marginLeft: ‘+=40px;’})
If I try:
$(‘#presentationContainer’).load(‘slide-’ + $currentSlide + ‘.html’).hide().fadeIn(1000).animate({marginLeft: ‘+=40px;’});
The presentation Container is what gets animated. So I need a more refined targeting … Again, I’m trying to snag these elements before they get faded in and slide them into place.
Thanks
| scott