Databases
StackOverflow2013
Postsdbo
POHow to animate a set of jQuery objects one at a time (instead of all at once)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to animate a set of jQuery objects one at a time (instead of all at once)
    primarykey
    data
    text
    <p>I'm trying to build a picture slider. (I know there are tons of plug-ins out there, but this is more for educational purposes).</p> <p>Basically, I have a set of images with z-index: 0. What I am trying to do is take the set of images, then select each one of the images and change the index to 1, animate the opacity, and then put it back at 0, so that the next image will do the same thing.</p> <p>This is the first part, but the problem I have is that when I am testing this part, all the images do the animation at the same time. Instead of doing one after the other. I know that you can use callback functions such as:</p> <pre><code>image1.animate(the animation, function({ image2.animation(the animation, function({ image3.animation(the animation, function}) etc... </code></pre> <p>})</p> <p>But if I had more images it would become more complicated. I am trying to find a more efficient way of doing this, but I am not finding the answer.</p> <p>This is what I have tried:</p> <pre><code>images.each(function () { $(this).css({ "opacity" : "0.0", "z-index" : "1" }).animate({ opacity: "1.0" }, 3000); }); </code></pre> <p>but it doesn't work. All the images do the animation at the same time. I even tried with a "for" loop, but I get the same thing:</p> <pre><code>for (var i=0; i&lt;images.length; i++){ images.eq(i).css({ "opacity" : "0.0", "z-index" : "1" }).animate({ opacity: "1.0" }, 3000); } </code></pre> <p>I know I am doing something wrong, but I can't figure out what it is. If anyone has any help it would be greatly appreciated!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMarvin Alejandro Herrera
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to animate a set of jQuery objects one at a time (instead of all at once)
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to animate a set of jQuery objects one at a time (instead of all at once)
      1. USMaxim Zaslavsky
      1. VTFavorite
    3. VO
      singulars
      1. POHow to animate a set of jQuery objects one at a time (instead of all at once)
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload