ループ内のアニメーションを制御する方法は？

Question

ループとそのアニメーション（fadingIn/Outイメージ）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); 

});