Using jQuery for alternating png transition

Question

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.

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.

What I want schematically is something like:

--loop start--

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

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

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

(5000 delay)

--loop repeat--

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.

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

    setTimeout(function() {
        $("#pngOverlay").fadeOut(1000);
    }, 10000);

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 liked them...)

Answer 1

How about using an animated PNG?

Answer 2

One trick I have seen is to have jQuery carry out an animation for 5000 milliseconds that has no visible effect.

  $("#pngOverlay").animate({opacity:1}, 5000);

If the opacity of the item was 1 to start with then it does not have a visible effect but it does pause for 5 seconds.

Answer 3

Something like this?

setInterval(function()
{
    var elm = $('#pngOverlay');
    if (elm.is(':hidden'))
        elm.fadeIn(1000);
    else
        elm.fadeOut(1000);
}, 5000);

Answer 4

<script language="JavaScript" type="text/javascript">
function showimage(){
     $("#pngOverlay").fadeIn(1000);
    setTimeout('hideimage()',5000);
}

function hideimage(){
      $("#pngOverlay").fadeOut(1000);
    setTimeout('showimage()',5000);

}
$(document).ready(function() {
    showimage();
});
</script>