jquery animation glitch for each item of a div container

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="sta开发者_C百科tic"></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!-->

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

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