Question

I made a vertical jQuery slideshow to where if you click 3 different images the table slides. This works perfect, but I also need it to slide on a timed function. I have tried doing loops with timeout functions but then my code for the click doesn’t work and the timing feature doesn’t even work. The attempt at a timing is at the bottom if it could just have a small mistake or something.

Original click function (works)

$(document).ready(function() {


    $("#slide1-1").click(function() {
        $("#slide1_images").css("top","0");
        $(".imagetab").css("opacity","1.0");
        $(".imagetab").css("filter",'alpha(opacity="100")');
        $(".imagetab2").css("opacity",".4");
        $(".imagetab2").css("filter",'alpha(opacity="40")');
        $(".imagetab3").css("opacity",".4");
        $(".imagetab3").css("filter",'alpha(opacity="40")');

    });
    $("#slide1-2").click(function() {
        $("#slide1_images").css("top","-430px");
        $(".imagetab2").css("opacity","1.0");
        $(".imagetab2").css("filter",'alpha(opacity="100")');
        $(".imagetab").css("opacity",".4");
        $(".imagetab").css("filter",'alpha(opacity="40")');
        $(".imagetab3").css("opacity",".4");
        $(".imagetab3").css("filter",'alpha(opacity="40")');

    });
    $("#slide1-3").click(function() {
        $("#slide1_images").css("top","-860px");
        $(".imagetab3").css("opacity","1.0");
        $(".imagetab3").css("filter",'alpha(opacity="100")');
        $(".imagetab2").css("opacity",".4");
        $(".imagetab2").css("filter",'alpha(opacity="40")');
        $(".imagetab").css("opacity",".4");
        $(".imagetab").css("filter",'alpha(opacity="40")');

    });

});

Timing attempt (doesn’t work)

        $(document).ready(function() {

    var slide = function() {
    $("#slide1_images").css("top","0");
    }

    var slide2 = function() {
    $("#slide1_images").css("top","-430px");
    }

    var slide3 = function() {
    $("#slide1_images").css("top","-860px");
    }

    var i;

    for(i = 0; i < element.length; ++i) {
    if (i=="1")
     {
      setTimeout(slide, 2000);
     }
    if (i=="2")
     {
      setTimeout(slide2, 2000);
     }
    if (i=="3")
     {
      setTimeout(slide3, 2000);
     }
    if (i=="4")
     {
      var i = "0";
     }

    }

 *INSERT CODE FROM ABOVE HERE.*

        });

Answer 1

You should be able to generalize your solution instead of duplicating so much of the code, since you do more or less the same thing for each tab. This solution reduces a lot of the redundancy:

function slide() {
    $("#slide1_images").css("top", "0");
}

function slide2() {
    $("#slide1_images").css("top", "-430px");
}

function slide3() {
    $("#slide1_images").css("top", "-860px");
}

$(document).ready(function() {
    setTimeout(slide, 2000);
    setTimeout(slide2, 4000);
    setTimeout(slide3, 6000);
    $("#slide1-1, #slide1-2, #slide1-3").click(function() {
        var index = $(this).index("#slide1-1, #slide1-2, #slide1-3");
        var tab = ['.imagetab', '.imagetab2', '.imagetab3'];

        $( tab[index] ).css("opacity", "1.0");
        $( tab[index] ).css("filter", 'alpha(opacity="100")');
        $( tab[(index+1) % 3] ).css("opacity", ".4");
        $( tab[(index+1) % 3] ).css("filter", 'alpha(opacity="40")');
        $( tab[(index+2) % 3] ).css("opacity", ".4");
        $( tab[(index+2) % 3] ).css("filter", 'alpha(opacity="40")');
    });
    $("#slide1-1").click(slide);
    $("#slide1-2").click(slide2);
    $("#slide1-3").click(slide3);
});​

Also, it should be noted that you don’t even need setTimeout for these animations; jQuery has a built in .animate() function for modifying css properties with a smoother transition:

$("#slide1_images").animate({ top: "-860px" }, 2000 );​