Question

我有jQuery代码，在多个手风琴刀片中逐个淡化图像。每次我点击一个新刀片时，一组新图像开始逐个淡入淡出，从左到右。但是，快速单击按钮会产生错误，因为图像开始以团块形式出现而不是从出现到右边出现。该插件位于http://preview.hyc.com/hy/process/process.html。我如何获得它，以便每次点击新标签时，重置新的淡入图像集，使其从左到右依次开始淡入？

我使用的jQuery代码是：

$(document).ready(function(i) {
    $(".box").hide();
    var currentBox = $(".container :first-child");
    fadeMyBoxes(currentBox);

    function fadeMyBoxes(thisbox){
        thisbox.fadeIn(2000);
        if (thisbox.is(":last-child")){
            clearTimeout(t);
        }
        else {
            var t =setTimeout( function(){fadeMyBoxes(thisbox.next());},500);
        }
    };

    $("#thetabs ul li").mouseup(function(i) {
        $(".box").hide();
        var currentBox = $(".container :first-child");
        fadeMyBoxes(currentBox);
        function fadeMyBoxes(thisbox){
            thisbox.fadeIn(2000);
            if (thisbox.is(":last-child")){
                clearTimeout(t);
            }
            else {
                var t =setTimeout( function(){fadeMyBoxes(thisbox.next());},500);
            }
        };
    });
});

Answer 1

答案可能在于链接而不是超时。 jQuery动画具有完成动画后执行的功能。

function fadeChain(elem) {
    if(elem) {
        $(elem).fadeIn('slow', function() {
            fadeChain($(this).next());
        });
    }
}
fadeChain($('#image1'));

证据就在小提琴中：http://jsfiddle.net/EcaYt/

jQuery fadein按特定顺序排列

1 个答案: