Question

做一些jquery动画。我设置的某些div的属性为 ani_seq ='x'，其中x为1到9，然后为'animate '指定了一个类。我正在使用以下代码，它工作正常，并按顺序淡化每个项目：

    function my_animate( in_wrapper_id ) {
        $j("#" + in_wrapper_id + " .animate").hide(); // hide all items to be animated

        // animate all seq1 items --
        $j("#" + in_wrapper_id + " [ani_seq='1']").fadeIn( 1000, 
            function() { $j("#" + in_wrapper_id + " [ani_seq='2']").fadeIn( 1000,
                function() { $j("#" + in_wrapper_id + " [ani_seq='3']").fadeIn( 1000,
                    function() { $j("#" + in_wrapper_id + " [ani_seq='4']").fadeIn( 1000,
                        function() { $j("#" + in_wrapper_id + " [ani_seq='5']").fadeIn( 1000,
                            function() { $j("#" + in_wrapper_id + " [ani_seq='6']").fadeIn( 1000,
                                function() { $j("#" + in_wrapper_id + " [ani_seq='7']").fadeIn( 1000,
                                    function() { $j("#" + in_wrapper_id + " [ani_seq='8']").fadeIn( 1000,
                                        function() { $j("#" + in_wrapper_id + " [ani_seq='9']").fadeIn( 1000 ); });
                                    });
                                });
                            });
                        });
                    });
                });
            }); 
    }

我遇到的问题是，有些项目不仅仅是淡入淡出。有些应该从左侧或右侧滑入。所以，我当然可以写一个自定义函数来做到这一点。我不知道该怎么做是设置自定义函数，所以它像 fadeIn（）函数一样工作，它接受一个将在动画完成时执行的回调函数。

例如，假设我有这样的函数（不确定这是正确的格式）：

function custom_animate ( in_time_in_ms, in_callback_function ) {
    // get class of element, and based on class perform either
    // a fade-in, or a slide-in from left, or a slide-in from right
    // then after animation is done, return control back to calling
    // function so it can resume
}

我想用 custom_animate（）替换第一段代码中的所有 fadeIn（）调用，然后在该函数内部，确定哪种类型的要执行的动画。

有人可以帮忙吗？

谢谢 -

Answer 1

只需将in_callback_function作为回调参数传递给您最终在custom_animate（）中调用的任何动画函数。

$(something).fadeIn(1000, in_callback_function);

此外，您当前的代码可能真的使用计数器变量或其他东西而不是重复的行;重复的东西不是你的工作，而是计算机的工作。

这是一个未经考验的例子，应该让你去（修复任何错别字留作读者的练习）：

function my_animate(wrapper_id) {
    var wrapper = $("#" + wrapper_id);

    wrapper.find(".animate").hide();
    // use data() to store the next index in the wrapper itself
    wrapper.data("ani_seq", 1);

    my_animate_run(wrapper);
}

function my_animate_run(wrapper) {
    var seq = wrapper.data("ani_seq");

    var el = wrapper.find("[ani_seq='" + seq + "']");
    if (!el.length) // reached the last element
        return;

    wrapper.data("ani_seq", seq + 1); // update the sequence
    var next = function() { my_animate_run(wrapper); };

    // choose your type of animation here
    el.fadeIn(1000, next);
}

jquery动画头痛

1 个答案: