jquery animation glitch for each item of a div container
<p>I want to loop through each slider and animate each of them seperate and not all together.</p>

<p>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.</p>

<p>Here is my jquery code: </p>

<pre><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');

}
</code></pre>

<p>Here is my HTML code: </p>

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