I've solved this myself (a good night's sleep always helps!). Posting
results here for anyone interested.
The trick was understanding the callback option in fadeIn, which
didn't work as I'd expected (no parameters allowed; it doesn't really
call the function, just passes the function name to something within
jQuery). I used a global variable to track things (boo hiss, but ok
since I couldn't pass the counter). As a result this isn't really a
recursive function, despite the appearance.
Here's my code. Prior to this I set up an array, myQuotes, which
contains the strings to display. HTML code is included in each array
element to provide formatting, so this could likely be used for images
too.
var quoteCounter = 0;
var totalQuotes=myQuotes.length;
function setNext()
{
if (quoteCounter>=totalQuotes) {quoteCounter=0;}
$('#animatedQuotes').html(myQuotes[quoteCounter]).fadeIn(1000).fadeTo
(10000, 1).fadeOut(1000, setNext);
quoteCounter++;
}
$(document).ready(function() {
setNext();
});
On Apr 27, 9:38 pm, Mitch Cohen <mitchellsco...@gmail.com> wrote:
> I have a small portion of a page which will contain a set of animated
> text snippets. Item one will appear immediately, then fade out; item
> two will fade in, pause, then fade out, etc. At the end of the
> sequence item one will appear again repeating forever. It's basically
> a slideshow of styled HTML text.
>
> I'm hoping to keep this simple, without the need for a big slideshow
> plugin.
>
> I wrote this:
>
> $('#animatedQuotes').html("number one").fadeIn(2000).fadeTo(5000,
> 1).fadeOut(1000).html("number two").fadeIn(2000);
>
> When this line is hit, the DIV changes to "number two" immediately.
> "Number two" fades out and back in again as you'd otherwise expect.
>
> How can I sequence this properly? I tried a a recursive callback from
> the fadeOut, but apparently that's not something we can do (Javascript
> threw an error).
>
> Thanks!
