jQuery 以特定顺序淡入淡出

发布于 2024-10-30 23:55:50 字数 1183 浏览 2 评论 0原文

我有 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);
            }
        };
    });
});

原文

I have jQuery code that is fading images in one by one inside multiple accordion blades. Every time I click on a new blade, a new set of images begins to fade in one by one, from left to right. However, clicking quickly through the buttons creates a bug as the images start to appear in clumps instead of appearing from let to right. The plugin is at http://preview.hyc.com/hy/process/process.html. How do I get it so that every time I click on a new tab, the new set of fade-in images is reset so that it begins fading in from left to right sequentially?

And the jQuery code I'm using is:

$(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);
            }
        };
    });
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我最亲爱的 2024-11-06 23:55:50

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

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

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

The answer may lie in chaining rather than using timeouts. jQuery animation has functions off of it that are executed upon completion of the animation.

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

The proof is in the fiddle: http://jsfiddle.net/EcaYt/

回复收藏 0 原文

~没有更多了~