如何将动画效果与单击功能混合

Question

我做了一个垂直的jQuery幻灯片，如果你点击3个不同的图像，表格就会滑动。这很完美，但我也需要它在定时功能上滑动。我试过用超时函数进行循环，但我的点击代码不起作用，计时功能甚至也不起作用。如果只是一个小错误或其他什么的话，那么在某个时间点上的尝试是最糟糕的。

原始点击功能（工作）

$(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")');
    });
});

定时尝试（不起作用）

        $(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

您应该能够概括您的解决方案，而不是复制太多代码，因为您对每个选项卡都做了或多或少相同的事情。这个解决方案减少了很多冗余：

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);
});​

此外，需要注意的是，这些动画甚至不需要setTimeout；jQuery有一个内置的.animate()函数，用于通过更平滑的转换来修改css属性：

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