Hi,
I have 6 boxes with text inside that animate one by one. I was wondering how I can combine them into an array to condense the code. I would also like to animate the text in a similar way to the boxes to make it look more graceful.
If anyone could help much appreciated!
<script>
$(document).ready(function() {
$('.one').animate({
opacity: 1,
height : "13em",
width : "16em"},
'200');
});
$(document).ready(function() {
$('.two').delay(200).animate({
opacity: 1,
height : "13em",
width : "16em"},
'200');
});
$(document).ready(function() {
$('.three').delay(400).animate({
opacity: 1,
height : "13em",
width : "16em"},
'200');
});
$(document).ready(function() {
$('.four').delay(600).animate({
opacity: 1,
height : "13em",
width : "16em"},
'200');
});
$(document).ready(function() {
$('.five').delay(800).animate({
opacity: 1,
height : "13em",
width : "16em"},
'200');
});
$(document).ready(function() {
$('.six').delay(1000).animate({
opacity: 1,
height : "13em",
width : "16em"},
'200');
});
</script>
<div class="row">
<div class="purple one">
<h3 class="ukdd">Lorem Ipsum</h3>
</div>
<div class="grey two">
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<div class="purple three">
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
<div class="row">
<div class="grey four">
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<div class="purple five">
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<div class="grey six">
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>