Slide Transition in HTML

Question

I have html like below:

<div id="#l0">
<img src="img.jpg" />
<img src="img.jpg" />
<div id="#p0" style="display:none">
    <div style="width:1320px;height:1080px;position:absolute;left:0px;top:0px;z-index:0;">
        test
    </div>
    <div style="width:600px;height:1080px;position:absolute;left:1321px;top:0px;z-index:0;">
        test
    </div>
    <div style="width:1000px;height:600px;position:absolute;left:200px;top:200px;z-index:5;">
       test
    </div>
</div>
<div id="#p1" style="display:none">
    <div style="width:1320px;height:1080px;position:absolute;left:0px;top:0px;z-index:0;">
        test1
    </div>
    <div style="width:600px;height:1080px;position:absolute;left:1321px;top:0px;z-index:0;">
        test1
    </div>
    <div style="width:1000px;height:600px;position:absolute;left:200px;top:200px;z-index:5;">
       test1
    </div>
</div>
<div id="#p2" style="display:none">
    <div style="width:1320px;height:1080px;position:absolute;left:0px;top:0px;z-index:0;">
        test2
    </div>
    <div style="width:600px;height:1080px;position:absolute;left:1321px;top:0px;z-index:0;">
        test2
    </div>
    <div style="width:1000px;height:600px;position:absolute;left:200px;top:200px;z-index:5;">
       test2
    </div>
</div>
<img src="img1.jpg" />

Now one by one content is display. For example, first image then next image,nect p0 div,p1 div,p2 div and then image.

It is dynamic means this is not exact..sometimes divs are up and images are after divs.

So, How can i provide slide effect to this?

I have tried below but not working

if (!($toSlide.hasClass("active")))
{

    $fromSlide.animate({"left":"-100%"},500,'linear')
    $toSlide.animate({"left":"0%"},500,'linear',function()
    {    
      $fromSlide.css("left","100%");
      $fromSlide.removeClass("active");  
      $toSlide.addClass("active");     
    });

}