I have two Divs with the class "sliced", each containing three images with the class "tile". When I animate using jQuery, I am unable to add a delay between the "sliced" classes. However, I have successfully added a delay between the "tile" classes.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Testing Scripts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slider-wrap">
<div class="sliced">
<div class="tile"><img src="http://imageshack.us/a/img545/9813/58zj.jpg" alt"1"></div>
<div class="tile tile1"><img src="http://imageshack.us/a/img818/5776/8ik6.jpg" alt"1"></div>
<div class="tile tile2"><img src="http://imageshack.us/a/img18/6017/rue6.jpg" alt"1"></div>
</div>
<div class="sliced " >
<div class="tile"><img src="http://imageshack.us/a/img163/6131/ld3f.jpg" alt"1"></div>
<div class="tile tile1"><img src="http://imageshack.us/a/img838/4102/h0nv.jpg" alt"1"></div>
<div class="tile tile2"><img src="http://imageshack.us/a/img833/6500/dp5e.jpg" alt"1"></div>
</div>
</div>
</div>
<script src="jQuery.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="script.js"></script>
<script>$('.sliced').slider();</script><!--Calling plugin with -->
</body>
</html>
CSS
body {
width: 960px;
margin: 100px auto;
font-family: helvetica;
font-size: 20px;
}
#animate {
width: 100px;
height: 30px;
margin-bottom: 10px;
font-size: 16px;
}
.sliced {
position: relative;
margin: 5px 5px;
width: 900px;
height: 200px;
border: 2px solid black;
}
.box {
width: 600px;
border: 2px solid rgba(0,0,0,.05);
padding: 10px 10px;
}
img {
width: 270px;
height: 150px;
}
.tile {
position: absolute;
float: left;
margin: 25px 15px;
}
.tile1 {
left: 280px;
}
.tile2 {
left: 560px;
}
JScript:-
function Slider(element){
var $element = $(element), //Jquery Object of .sliced class
$tiles = $element.find('.tile'); //$tiles contains all .tile class as jquery Object
$.each($tiles,function(index,value){
setTimeout(function(){
$(value).fadeOut(1000);
},1000*index);
});
}
$.fn.slider = function(){
//This stores all .sliced class as Jquery object
return this.each(function(){ //Iterating over each class provided
var slider = new Slider(this); //Slider is constructor function
//console.log(slider);
});
}