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

這裏是一個的jsfiddle我做了回答一個非常類似的問題：http://jsfiddle.net/jJ8vJ/（這個問題可以在這裏找到：how to animate position in Order?）。

的基本思想是設置的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]); 

Answer 2

從碧玉答案好。我給你一些鏈接，您應該閱讀：他們解釋你已經在你的代碼做，以及如何避免他們一些常見的錯誤;）

• 7 Common Javascript Mistakes or Confusions（主文章）
• Premature Invocation（你的主要錯誤）
• Delaying Repeatedly（這是賈斯珀解釋，但有點不同）