html
Code: Select all
<div class ="slide" id ="slide1">
</div> <!--closes slide1-->
<div class ="slide" id ="slide2">
</div> <!--closes slide2-->
<div class ="slide" id ="slide3">
</div> <!--closes slide3-->
<div class ="slide" id ="slide4">
</div> <!--closes slide4-->
Code: Select all
.slide{width:400px;height:240px;display:none;position:relative;top:40px;left:20px}
#slide1{background:red}
#slide2{background:green}
#slide3{background:blue}
#slide4{background:yellow}
jQ
Code: Select all
<script type = "text/javascript">
$(document).ready(function() {
$.each($('.slide'), function(i, val){
setTimeout(function(){
$(val).animate({width:"toggle"}, '4000').delay(3000).animate({width: "toggle"},'4000');
},4500 + (i*4500));
});
});
</script>