Question

我正在寻找一种方法来阻止事件一次性运行，因此它们必须以正确的顺序运行，因此必须在此之前完成事件。我已经看到你可以使用jQuery队列，但我似乎无法让它工作。

这个例子是一个简单的'show a msg'在占位符的想法中（他们必须等待彼此完成）。

我在示例代码中使用了2个链接，但还有更多。这是一个想法/代码的小例子。

    $('.link-1').click(function(e){

        $.plugin.show({
             text: 'Quisque porta purus et odio vulputate ornare. Suspendisse dui dui.',
             time: 1000
        });
    });

    $('.link-2').click(function(e){

        $.plugin.show({
             text: 'Etiam non augue nec felis consectetur sodales a.',
             time: 4000
        });
    });


    // public functions
    $.plugin= {
        show: function(str){

            var tmp = '<div class="msg-box">'+str.text+'</div>';

            $('#msg-div').prepend(tmp);

            $('.msg-box').fadeIn(str.time, function(){
                $(this).delay(str.time).fadeOut(str.time, function(){
                     $(this).remove();
                }):
            });
        } 
    }

Answer 1

jQuery的队列是专为动画设计的，是一个元素范围对象，这意味着没有提供全局动画队列来满足您的要求。

由于您始终在.msg-div方法中创建全新的$.plugin.show元素，因此所有这些消息div都不是同一个元素，因此您无法重复使用相同的动画队列。

根据您的要求，Flow-JS可能是更好的选择，包括它并编写如下代码：

    $.plugin = {
        show: function(str, callback /* 1. add an callback argument */) {
            var tmp = '<div class="msg-box">' + str.text + '</div>';

            $('body').prepend(tmp);

            $('.msg-box').fadeIn(
                str.time, 
                function() {
                    $(this).delay(str.time).fadeOut(
                        str.time, 
                        function() {
                            $(this).remove();
                            callback(); /* 2. run callback here */
                        }
                    );
                }
            );
        }
    };

    flow.exec(
        function() {
            $.plugin.show(
                { text: 'abc', time: 4000 },
                this /* 3. provide this as callback parameter to $.plugin.show */
            );
        },
        function() {
            $.plugin.show(
                { text: 'xyz', time: 1000 },
                this /* 3. provide this as callback parameter to $.plugin.show */
            );
        }
    );

您只需在callback方法中添加$.plugin.show参数，然后使用flow.exec方法执行所有动画功能，并提供this作为callback参数在调用$.plugin.show方法时。

Answer 2

在你的插件功能中，你错过了一个'

$.plugin= {
    show: function(str){
        var tmp = '<div class="msg-box">'+str.text+'</div>';

        $('#msg-div').prepend(tmp);

        // $(.msg-box').fadeIn(str.time, function(){
        $('.msg-box').fadeIn(str.time, function(){
            $(this).delay(str.time).fadeOut(str.time, function(){
                $(this).remove();
             }):
        });
    } 
}

也可以在你的插件上编辑。显示你有太多的逗号

$.plugin.show({
     text: 'Quisque porta purus et odio vulputate ornare. Suspendisse dui dui.',
     time: 1000//,
});

jQuery：让事件在彼此之后运行（队列）

2 个答案: