Hey there! I've been working on a simple animation for my webpage, but I'm having some trouble getting it to work the way I want.
You can check out my page at . What I'm trying to achieve is having each image appear at its final position and animate one by one, rather than all at once.
Below is the code I'm using:
HTML
<div class="left">
<span class="name">
<a href="index.php"><img class="menu" src="name.png"/></a>
</span>
<span class="img">
<img src="actions/p30.jpg" onclick="Click(this)"/>
</span>
</div>
<div class="middle">
<span class="img">
<img src="actions/p1.jpg" onclick="Click(this)"/>
</span>
<span class="img">
<img src="actions/p4.jpg" onclick="Click(this)"/>
</span>
</div>
<div class="right">
<span class="img">
<img src="actions/p5.jpg" onclick="Click(this)"/>
</span>
<span class="img">
<img src="actions/p6.jpg" onclick="Click(this)"/>
</span>
</div>
CSS
.left, .middle, .right{
/*max-width: 35%;*/
min-width: 30%;
position: relative;
float: left;
top: 2.5em;
margin-right: 2px;
margin-bottom: 35px;
}
.left{
left: 0;
}
.middle{
left: 300;
}
.right{
left: 600;
}
.img {
position: relative;
opacity: 0;
margin: auto;
max-width: 0;
-webkit-transition: all 1.5s ease-out;
-moz-transition: all 1.5s ease-out;
-ms-transition: all 1.5s ease-out;
-o-transition: all 1.5s ease-out;
transition: all 1.5s ease-out;
margin-top: -0.5em;
}
JS
jQuery.fn.reverse = [].reverse;
$(function () {
var delay = 300;
$('.right, .middle, .left').each(function () {
var imgs = $('.img'),
iLen = imgs.length;
imgs.each(function () {
var c = $(this),
h = c.height();
delay += 10;
setTimeout(function () {
c.css('max-width', '100%');
c.css('opacity', '1');
}, delay);
});
});
});
Can anyone offer some assistance with this?