jQuery動畫，忽略其他點擊直到動畫完成

Question

我創建了一些腳本來顯示一個列表，當一個粗體標題被點擊時，並且當另一個標題被點擊時隱藏同一個列表。

有沒有一種方法讓動畫在動畫運行時忽略其他點擊？

這裏是我創建了一個小提琴：

http://jsfiddle.net/VBh5f/

下面是HTML：

<ul id="accordion" class="collapsible"> 
    <li class="main"><span>+</span> <b>Oil and Vinegar</b> 
     <ul> 
      <li>Extra Virgin Olive Oil</li> 
      <li>Nut and Seed Oils</li>  
      <li>Balsamic Vinegar</li> 
      <li>Wine Vinegar</li> 
     </ul> 
    </li>   
    <li class="main"><span>+</span> <b>Coffee and Tea</b> 
     <ul> 
      <li>Mariage Frères Tea</li>  
      <li>Peaberry&#039;s Coffee and Tea</li> 
     </ul> 
    </li>  
</ul> 

這裏是JavaScript：

function show(i) { 
    $('.main > ul:eq('+i+')').css(
    { 
     display:'block' 
    } 
    ).animate(
    { 
     opacity: 1 
    }, 
    100, 
    function() { 
     $(this).parent().find('span').text('-'); 
    } 
); 
} 

function hide(i) { 
    $('.main > ul:eq('+i+')').css(
    { 
     display:'none' 
    } 
    ).animate(
    { 
     opacity: 1 
    }, 
    100, 
    function() { 
     $(this).parent().find('span').text('+'); 
    } 
); 
} 

function listControl(i, doWhat) { 
    $('.main').each(function(index, elem) { 
    hide(index); 
    }); 
    if (doWhat === 'showList') { 
    show(i); 
    } 
} 

function click() { 
    $('.main').on('click', function() { 
    if ($(this).find('ul').css('display') === 'none') { 
     listControl($(this).index(), 'showList'); 
    } 
    else { 
     listControl($(this).index()); 
    } 
    }); 
} 

$(document).ready(function() { 
    click(); 
}); 

這裏是CSS：

ul {list-style:none;} 
.main > ul {display:none;} 

Answer 1

試試這個：

http://jsfiddle.net/VBh5f/10/

$('.main').on('click', function() { 
     if($('#accordion ul').is(':animated')) return; 
     if ($(this).find('ul').css('display') === 'none') { 
      listControl($(this).index(), 'showList'); 
     } 
     else { 
      listControl($(this).index()); 
     } 
    }); 

Answer 2

您只需創建一個變種：

isMoving = true; 
if(!isMoving){ 
//your code 
} 

而且回調後isMoving = false;