1

I want to loop through each slider and animate each of them seperate and not all together.

With my current code, I'm doing the animation all together, which I don't get it since I used .each and .delay to wait for the next animation.

Here is my jquery code:

$(document).ready(function(){
var i = $('#slideContainer .slider');
var w = $(window).width();
i.each( function () {
            var obj = $(this);

            obj.delay(800).fadeOut('fast', function(){
                $(obj, 'div.slider').toggleClass("none");

                $('.slideIcon').offset({left: w});
                $('.slideText p').offset({left: w});
                $( '.slideImage2').offset({left: w});

                sliderRight();
                sliderLeft(w);
            });
        });
});

function sliderRight(){

    $(".slideIcon").animate({left:0}, 4000, 'easeInOutExpo');
    $(".slideText p").animate({left:0}, 5000, 'easeInOutExpo');
    //$(".slideImage1").animate({opacity:1}, 5000);
    $(".slideImage2").animate({left:0}, 5000, 'easeInOutExpo');

 }

 function sliderLeft(w){
    $(".slideIcon").animate({left:-w}, 4000, 'easeInOutExpo');
    $(".slideText p").animate({left:-w}, 2000, 'easeInOutExpo');
    //$(".slideImage1").animate({opacity:0}, 5000);
    $(".slideImage2").animate({left:-w}, 2000, 'easeInOutExpo');

}

Here is my HTML code:

    <div id="slideshow">
        <div id="slideContainer">
            <div class="slider none">
                <div class="slideText">
                    <img class="slideIcon"src="img/banh-mi-icon.png" alt="" />
                    <p>Vite fait, vite pr&ecirc;t&ensp;!</p>
                </div>
                <div class="static"></div>
                <div class="slideImage">
                    <img class="slideImage1" src="img/line1.png" alt="" />
                    <img class="slideImage2"src="img/line3.png" alt="" />
                </div>
                <div class="clear"></div>
            </div>
            <div class="slider none">
                <div class="slideText">
                    <img class="slideIcon"src="img/bubble-tea-icon.png" alt="" />
                    <p>Avec boules de tapiocas&ensp;!</p>
                </div>
                <div class="slideImage">
                    <img class="slideImage1"src="img/line2.png" alt="" />
                    <img class="slideImage2"src="img/line3.png" alt="" />
                </div>
            </div>
    </div><!-- end slidecontainer!-->

2 Answers 2

0

It does not work that way, you will have to encapsule the functions like this

$(".slideIcon").animate({left:0}, 4000, 'easeInOutExpo', function(){
 $(".slideText p").animate({left:0}, 5000, 'easeInOutExpo', function(){
  $(".slideImage2").animate({left:0}, 5000, 'easeInOutExpo'); 
}); 
});

What this does is animate each item one after another the function provided as last parameter is the callback, it gets executed when the current animation is completed

1
  • thanx, but it's not that kind of effect I wanted. The animation I wrote is alright. The issue I'm having it's animating all my slider at once and not one at a time. here is the example: trokit.com Sep 25, 2011 at 20:42
0

I finally found the solution to my problem.

Use an array, find the length of my class slider.

Create multiple function for each slider effect, example: left-to-rigth, rigth-to left.

For each of this function add the animations desire with a stop animation.

Use an automator for preloading the next image by testing if it exist or not and setting a setInterval for the timeout.

I haven't wrote the code yet, but the logic is there. Hope it can help someone

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.