головная боль анимации jquery - PullRequest
Новая
       12

головная боль анимации jquery

0 голосов
/ 01 апреля 2010

Выполнение анимации в 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
}

Я бы хотел заменить все вызовы fadeIn () в первом фрагменте кода на custom_animate () , а затем внутри этой функции определить, какую анимацию выполнять.

Может кто-нибудь помочь?

Спасибо -

1 Ответ

1 голос
/ 01 апреля 2010

Просто передайте функцию 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);
}
...