如何将动画效果与点击功能混合？答案

【问题标题】：How can I mix animation effects with click functions?如何将动画效果与点击功能混合？
【发布时间】：2012-09-03 00:00:42
【问题描述】：

我制作了一个垂直的 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.*

        });

【问题讨论】：

标签： jquery timeout

【解决方案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 );

【讨论】：