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

});

如何控制循环内的动画？

1 个答案: