Объединение эффектов с помощью jQuery

Question

У меня есть 4 изображения (логотип-1, логотип-2, логотип-3 и логотип-4), и я хочу показывать их одно за другим, когда нажимаю на кнопку.

Сначала я установил высоту изображений в 0, чтобы показать их с эффектом easeOutBounce.

Я использую функцию анимации, но четыре изображения отображаются одновременно.

Как мне объединить анимацию?

<script>
function mostrar(num_logo) {
    if (num_logo <= 4) {
        $("#logo-"+num_logo)    
            .stop().animate(
                {height: '218px'},
                {queue:false, 
                 duration:1000, 
                 easing: 'easeOutBounce',
                 complete: mostrar(num_logo+1)}                             
            );

    }
}
    $(function() {
        // run the currently selected effect
        function runEffect() {

            for (i=1;i<=4;i++) {
                $("#logo-"+i).css('height', '0px');
            }   
            mostrar(1);


        };

        $( "#button" ).click(function() {
            runEffect();
            return false;
        });

    });
</script>

Answer 1

Ответ от Джаспера хорош.Я даю вам ссылки, которые вы должны прочитать: они объясняют некоторые распространенные ошибки, которые вы допустили в своем коде, и как их избежать;)

• 7 Типичные ошибки или путаницы в JavaScript (основная статья)
• Преждевременный вызов (ваша основная ошибка)
• Повторная задержка (это было объяснено Джаспером, но немного по-другому)1014 *

Answer 2

Вот jsfiddle, который я сделал, чтобы ответить на очень похожий вопрос: http://jsfiddle.net/jJ8vJ/ (Вопрос можно найти здесь: как анимировать позицию в ордере? ).

Основная идея состоит в том, чтобы установить массив объектов jQuery (элементы, которые вы хотите анимировать по порядку) и использовать обратный вызов функции .animate() для анимирования элементов в порядке

var $items     = [$('#one'), $('#two'), $('#three'), $('#four')],//stores the DOM elements to be animated in order
    item_index = 0,//stores the current index in the animation queue
    animations = {
        '0px0px'     : { left : '100px', top : '0px' },//0px0px means the element is at the top left
        '100px0px'   : { left : '100px', top : '100px' },//100px0px means the element is at the top right
        '0px100px'   : { left : '0px'  , top : '0px' },//0px100px means the element is at the bottom left
        '100px100px' : { left : '0px'  , top : '100px' }//100px100px means the element is at the bottom right
    };//this stores the conversion between where the element is and where it should animate to

//setup a function that can call itself inside the animation callback to iterate through the DOM elements to be animated
function run_animation($element) {

    //check to make sure there are more DOM elements to animate, if none are found then the process is done
    if (item_index in $items) {

        //get this element's top and left CSS properties and put them together so we can convert that to the next coordinates it needs
        var css = $items[item_index].css('left') + '' + $items[item_index].css('top');

        //now animate this element by converting the current top/left CSS properties to its next coordinates
        $items[item_index].animate({
            left : animations[css].left,
            top  : animations[css].top
        }, 1500, function () {

            //here we run this same function for the next index
            item_index++;
            run_animation($items[item_index]);
        });
    }
}

//run the animation function for the first time
run_animation($items[item_index]);