Using jQuery for alternating png transition
<p>Very basic question. I have a very simple web design utilizing a png with transparency, overlaying another base image. The idea here is that it cycles visibility continously, fading in quickly, displaying for a longer interval, fading out quickly, and remaining invisible for an equal longer interval, basically replicating the behavior of an animated GIF from back in the day. The png starts with display set to none.</p>

<p>My problem is jQuery doesn't seem to have a "pause" or "delay" event handler to help here. There are numerous plugins filling the gap, but I'd rather not include one if there's a simple way that I'm missing. That might require falling back on setInterval or setTimeOut, but I'm uncertain of the syntax to do that.</p>

<p>What I want schematically is something like:</p>

<pre><code>--loop start--

$("#pngOverlay").fadeIn(1000);

(5000 delay)  // using setTimeout or setInterval if jQuery method unavailable

$("#pngOverlay").fadeOut(1000);

(5000 delay)

--loop repeat--
</code></pre>

<p>The following does the behavior once, so I guess if this could be wrapped in a loop it might work, but it doesn't strike me as elegant or the right way.</p>

<pre><code>    setTimeout(function() {
        $("#pngOverlay").fadeIn(1000);
    }, 5000);

    setTimeout(function() {
        $("#pngOverlay").fadeOut(1000);
    }, 10000);
</code></pre>

<p>Thanks for any suggestions. I would just use GIFs, but need the transparency for this. (In the old days, we used animated GIFs and we <em>liked</em> them...)</p>
