Take the 2-minute tour ×

So I've got a header image that upon being clicked animates with transit, fades out, and fades back in with a new image. I'm then able to click on the new image and it will also animate and fade out to blank space. How can I continuously animate/fade through a series of ordered images - one new image per click ad infinitum?

Here's what I've got so far...

        $("#headimg").transition({ skewY: '30deg' },1000);
        $("#headimg").fadeOut(function() {      
        $(this).transition({ skewY: '00deg' }) .load(function() { $(this).fadeIn(); }); 
        $(this).attr("src", "/imgurl.jpg");
share|improve this question
add comment

2 Answers

You can use the javascript function called setInterval(); like this:

   //this code will keep on executing on every 2 seconds.
share|improve this answer
add comment

The following snippet doesn't solve your problem exactly, but it might put you on the right track, as it randomly cycles through a set of 28 images with fading in and out. You can see it live at http://moodle.hsbkob.de:

<script type="text/javascript">
var g_first_call = true;
var g_pic_old;

$(document).ready(function() {      
    setInterval("pickPic()", 7500);

function randomPic() {
    do {
        var pic = parseInt(28*Math.random()+1);
    } while (pic == g_pic_old);  // Don't want same pic twice 

    g_pic_old = pic;

    document.getElementById("_image_").src = "./picfolder/picno" + pic + ".jpg";

function pickPic() {
    if (g_first_call) {
        g_first_call = false;

    $("#_fadee_").fadeIn(750, function() {
        $("#_fadee_").delay(6000).fadeOut(750, randomPic);
<div id="_fadee_"><img id="_image_" alt="Image" /></div>
share|improve this answer
add comment

Your Answer


