如何將動畫效果與點擊功能混合？

我做了一個垂直的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.* 

     });

來源

2012-09-03 Spencer May

你應該能夠概括您的解決方案，而不是重複這麼多的代碼，因爲你爲每個標籤做了或多或少的相同的事情。該解決方案減少了很多冗餘的：

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

來源

2012-09-03 01:26:58 nbrooks

謝謝！這導致我的最終代碼非常完美。 –

如何將動畫效果與點擊功能混合？

回答

相關問題