CODEWITHSUNDEEP
javascriptjquery
bswinnerton
bswinnerton

Reputation: 4721

Fadein loop for class

I'm trying to loop through each element of a class in javascript and display it after pausing a certain amount of seconds. I have the logic down, but because jQuery is calling the class, and not the unique instance of this, it displays everything all at once:

jQuery( document ).ready(function ($) {
    $( ".fadein" ).hide();

    $( ".fadein" ).each(function (index) {
      $( "." + this.className ).delay(index * 800).fadeIn( "slow" );
    });
});

Upvotes: 0

Views: 38

Answers (1)

Mike Edwards
Mike Edwards

Reputation: 3773

The each loop is already designed to hand you the elements one at a time. The target element is passed as 'this', so just fadeIn the current element in your 'loop' instead of fetching all of them each time.

// Replace this
$( "." + this.className ).delay(index * 800).fadeIn( "slow" );
// with this
$( this ).delay(index * 800).fadeIn( "slow" );

// result:
$( ".fadein" ).each(function (index) {
    $( this ).delay(index * 800).fadeIn( "slow" );
});

Upvotes: 2

Related Questions