如何控制循环内的动画？

Question

我想控制我的循环和它的动画（淡入/淡出图像）onClick。点击应该停止淡入/淡出动画循环并再次从所需的位置开始。我带来的解决方案并不令人满意。他们使双击隐藏一切和/或使循环和相关故障的实例等.... Noob在工作，所以容易对我和帮助，如果你可以。

下面是总体思路的一些代码，但我会在这篇文章的末尾提供下载的整体代码：

循环：

function sequencedFade(imgIndex, numImages) {   
if(imgIndex < numImages) { 
    /* =| Original method |=*/ 
    $("#btn"+imgIndex).animate({ backgroundColor: "#ff8888" }, "slow").delay(3000); 
    $("#btn"+imgIndex).animate({ backgroundColor: "#8888ff" }, "slow"); 
    $("#"+imgIndex+"slika").fadeIn("slow").delay(3000); 
    $("#"+imgIndex+"slika").fadeOut("slow", function() { sequencedFade(imgIndex+1, numImages)}); 
    } 
else{ 
    $("#btn"+imgIndex).animate({ backgroundColor: "#ff8888" }, "slow").delay(3000); 
    $("#btn"+imgIndex).animate({ backgroundColor: "#8888ff" }, "slow"); 
    $("#"+imgIndex+"slika").fadeIn("slow").delay(3000); 
    $("#"+imgIndex+"slika").fadeOut("slow", function() { sequencedFade(1, numImages)}); 
    } 
} 

我的“点击”的想法，是至今没有工作：

$("#btn1").click(function(){ 

    $("#btn1").queue(function(){ 

     // 2xclick stops everything and maybe some other errors 
     $(".gImages").stop(true,true).hide(); 
     $(".tBut").stop(true,true).animate({ backgroundColor: "#8888ff" }, 0); 
     $(this).animate({ backgroundColor: "#ff8888" }, "slow").delay(3000); 
     $(this).animate({ backgroundColor: "#8888ff" }, "slow"); 
     $(this).dequeue(); 
     /* delay works but 2 instances of loop are sown on 3 clicks 
     $(this).queue(function(){ 
      $(this).animate({ backgroundColor: "#ff8888" }, "slow").delay(3000); 
      $(this).animate({ backgroundColor: "#8888ff" }, "slow"); 
      $(this).dequeue(); 
      }); 
    */ 
    }); 

$("#1slika").queue(function(){ 
    $(this).fadeIn("slow").delay(3000); 
    $(this).fadeOut("slow",function(){ 
     sequencedFade(2,4); 
     }); 
    $(this).dequeue(); 
     }); 

    /* ======| a lot of glitches |===== 
    $("fx").clearQueue(); 
    $("fx").stop(true); 
    $(".gImages").stop(true,true).hide(); 
    $(".tBut").stop(true,true).animate({ backgroundColor: "#8888ff" }, 0); 
    sequencedFade(1,4); 
    */ 
    }); 

Download whole project

Answer 1

它的工作原理我

希望它会帮助你））

var numOfimgs=4; 
$(document).ready(function(){ 

function preloadImages(numOfimgs){ 
    var i; 
    for(i=1; i<numOfimgs+1; i++){ 
     $("div#ldAr").append('<img class="gImages" id="'+i+'slika" src="'+i+'.jpg" />'); 
     $("img#"+i+"slika").hide(); 
     //$("div#ldAr").append(i); 
    } 
} 

preloadImages(numOfimgs); 

$('.tBut').live('click',function(){ 
    var i = $(this).index()+1; 
    $('.gImages').hide(); 
    $('.tBut').animate({ backgroundColor: "#8888ff" }, "slow"); 
    $(this).animate({ backgroundColor: "#ff8888" }, 500); 
    $('#ldAr').html(''); 
    preloadImages(numOfimgs); 
    sequencedFade(i, numOfimgs) 
}) 

function sequencedFade(imgIndex, numImages) { 

    /* =| Original method |=*/ 
    $("#btn"+imgIndex).animate({ backgroundColor: "#ff8888" }, "slow"); 

    $("#"+imgIndex+"slika").fadeIn("slow").delay(3000); 
    $("#"+imgIndex+"slika").fadeOut("slow", function() { 
    $("#btn"+imgIndex).animate({ backgroundColor: "#8888ff" }, "slow"); 
     imgIndex < numImages ? sequencedFade(imgIndex+1, numImages) : sequencedFade(1, numImages) 
    }); 
} 

sequencedFade(1,4); 

});