jQuery each index iteration

Question

I have a wall of images and underneath some text, with that i would like the image to fade in then its text to fade in.
With this code below, each image fades in then ALL of the text fades in at once.

Q: how can i use index so that the corresponding text will fade in following its image?
I've found a similar question but could'nt get this to work.

css:
.mydiv a, .mydiv p{ display:none;}

js:

$('.mydiv a').each(function(index){
    var c = $(this);
    $(new Image()).load(function(){
            c.fadeIn(500);
            setTimeout(function(){ $('.mydiv p').fadeIn(250); }, 500);// where would i place index
    }).attr('src', c.find('img').attr('src'));
});

user400654 · Accepted Answer · 2012-10-17 17:25:38Z

4

Navigate from the existing c variable if there is one mydiv for each p element

$(c).closest(".mydiv").find("p").fadeIn(250);

or use .eq()

$(".mydiv p").eq(i).fadeIn(250);

answered Oct 17, 2012 at 17:25

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1744166 · Accepted Answer · 2012-10-17 17:26:12Z

0

$('.mydiv a').each(function(i, e){
    var c = $(this);
    e.load(function(){
            c.fadeIn(500);
            setTimeout(function(){ $('.mydiv p').fadeIn(250); }, 500);// where would i place index
    }).attr('src', c.find('img').attr('src'));
});

answered Oct 17, 2012 at 17:26

user1744166

1 Comment

user400654 Over a year ago

anchor tags don't natively trigger a load event, and load event's don't bubble in all browsers.

Collectives™ on Stack Overflow

jQuery each index iteration

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related