jQuery - Using animation with "complete" function
<p>I have been trying to make a scrolling animation using jQuery, where something happens at each step of the scrolling. The example I was trying was to make each row flash a color. So the javascript was like</p>

<pre><code>function scrCalRows() { //testing: scroll down through calendar
    // just picking certain rows, and do something
    var velt,vpos,vflash;
    var elt=$("#calendarsbody");
    elt.animate({scrollTop:0},0);  // bring to top
    var rows=$("tr");
    for (ii=0;ii&lt;20;ii++) { // just do 100 rows
        velt = rows[ii];
        vpos = $(velt).offset().top;
        vflash = function() {flashelt(velt,'green');}
        elt.animate({scrollTop:vpos},{duration:1000,complete:vflash});
    }
}

function flashelt(oelt,colour) {
    var flashclass = "flash"+colour;
    oelt.classList.remove(flashclass); // first clear
    setTimeout(function() {oelt.classList.add(flashclass);},0)
    setTimeout(function() {oelt.classList.remove(flashclass);},2000)

}

and css
.flashgreen{
    animation-name: flashgreen;
    animation-duration: 1s;
    animation-iteration-count: 2;
}
</code></pre>

<p>Here vflash is the "complete" function of the animation, supposed to run after it scrolls to each row. 
flashelt works fine if I call it on one row, and the scroller scrolls fine, but no flashing.
What actually seems to happen is that vflash ends up being defined once after all the steps - I think. I tried various combinations of defining the vflash function inside the loop using ii or velt and such, mostly getting undefs.
How can I get this to work properly?</p>