Поочередная анимация JQuery

385

16 июля 2017, 11:22

Есть 4 блока.При клике на первый блок,анимация запускается и блоки поочередно появляются. Для этого написал такую функцию:

    jQuery('#map_open').on('click',function () { 
        jQuery('.map_item__block_1').animate({ 
                height : 'toggle', 
                opacity: 'toggle' 
            },300,"linear",function () { 
                jQuery('.map_item__block_2').animate({ 
                    height : 'toggle', 
                    opacity: 'toggle' 
                },300,"linear",function () { 
                    jQuery('.map_item__slider_block').animate({ 
                        height : 'toggle', 
                        opacity: 'toggle' 
                    },400,function(){ 
                      jQuery('.slider__block').slick(); 
                    }); 
                }) 
            } 
        ) 
    });

Как ее можно сократить, и сделать универсальной,и правильной?

Пример на codepen

Answer 1

Пожалуйста:

    var animateFn = {height: 'toggle', opacity: 'toggle'},
        animateDuration = 300,
        blocks = ['.map_item__block_1', '.map_item__block_2', '.map_item__slider_block', initCarousel];
jQuery('#map_open').on('click', function animateOnClick() {
    var block = blocks.shift();
    if (typeof block === "function") {
        block();
        animateOnClick();
    } else {
        animate(block, animateOnClick);
    }
});
function animate(block, cb) {
    jQuery(block).animate(animateFn, animateDuration, cb);
}
function initCarousel() {
}

По клику функция рекурсивно проходит по массиву blocks: берет первый элемент массива, и передает его в функцию animate вместе с ссылкой на себя. Когда анимация завершается, animate ещё раз вызывает функцию animateOnClick, и так по кругу. Если элемент массива в animateOnClick оказывается функцией - то сначала она выполняется, всё идёт на следующий круг.