How to use the same jQuery class

Question

You must see the effect to understand what I mean.

http://jsfiddle.net/VS8tQ/28

I could not use the same class in jQuery because I could not achieve the desired effect, so I made an animation with two classes.

Can someone tell me how can I use only one class to achieve the same effect?

Answer 1

I think for this you need a nested loop:

$(".section").each(function() { $(this).children().each(function(i) { }); }); 

http://jsfiddle.net/VS8tQ/29/

Answer 2

I think this is the solution you are looking for ( jsFiddle ):

 $("p").animate({opacity: 0}, 0); $(".divSection").each(function() { $(this).children().each(function(i) { $(this).delay(100 * i).css('display', 'block').animate({ opacity: 0 }, 0).animate({ opacity: 1, marginLeft: "+=10px" }, 200) }); }); 

Answer 3

Your code is absolutely correct and it does not need to be written twice. Just use jQuery for the class name 'section' as shown below:

 $("p").animate({opacity: 0}, 0); $("div[class^='section']").each(function() { $(this).children().each(function(i) { $(this) .delay(100 * i) .css('display', 'block') .animate({opacity: 0}, 0) .animate({opacity: 1, marginLeft: "+=10px"}, 200) }); }); 

"div[class^='section']" selects all classes starting with a section (for example, section1, section2 ..).

Answer 4

Try the following: http://jsfiddle.net/VS8tQ/30/

 $("p").animate({opacity: 0}, 0); $(".divSection1 *").each(function(i) { taDa(this, i) }); $(".divSection2 *").each(function(i) { taDa(this, i) }); function taDa(obj, i) { $(obj) .delay(100 * i) .css('display', 'block') .animate({opacity: 0}, 0) .animate({opacity: 1, marginLeft: "+=10px"}, 200); }