Any idea how to animate the opacity of each certain element one by one up to 16 targets/ elements only?
This will change the opacity of the elements all together,
$('.block-item').animate({
opacity:0
},500);
Have a look here.
But I want the opacity to change one after another. and this will stop when it reaches the 16th element.
Here is the html,
<div id="parent_container">
<div class="block-item">1</div>
<div class="block-item">2</div>
<div class="block-item">3</div>
<div class="block-item">4</div>
<div class="block-item">5</div>
<div class="block-item">6</div>
<div class="block-item">7</div>
<div class="block-item">8</div>
<div class="block-item">9</div>
<div class="block-item">10</div>
<div class="block-item">11</div>
<div class="block-item">12</div>
<div class="block-item">13</div>
<div class="block-item">14</div>
<div class="block-item">15</div>
<div class="block-item">16</div>
<div class="block-item">17</div>
<div class="block-item">18</div>
</div>
I came out this function but it crashes any browser on it,
function opacity_test(index)
{
$('.block-item').eq( index ).animate({
opacity:0
},500);
setInterval( function() {
opacity_test(index + 1);
}, 1000 );
}
Thanks.
Try this:
var delay = 0;
$('.block-item:lt(16)').each(function(){
//^^ do for every instance less than the 16th (starting at 0)
$(this).delay(delay).animate({
opacity:0
},500);
delay += 500;
});
Fiddle: http://jsfiddle.net/maniator/VS8tQ/3/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With