Как управлять анимацией внутри цикла?

Question

Я хочу управлять своим циклом и его анимацией (исчезающие изображения / изображения) на клике. Клик должен остановить цикл анимации fadeIn / Out и начать снова с нужного места. Решения, с которыми я пришел, не удовлетворяют. Они заставляют двойной щелчок скрывать все и / или создавать экземпляры цикла и связанных с ним глюков и т. Д. Нуб на работе, поэтому будьте осторожны со мной и помогите, если сможете.

Вот код для общей идеи, но в конце этого поста я приведу целый код для скачивания:

Loop:

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);
    */
    });

Загрузить весь проект

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

});