대기를 시작하기 전에 완료 새로운

Question

나는 다음과 같은 탐색 내가 마우스 오버 이벤트에 각각 애니메이션이 될 때까지 기다리게 할 JSFIDDLE

에 포함 된 메뉴하는 것, 새로운 일을 시작하기 전에 완료에게 있습니다 새 메뉴 항목 위에 마우스를 올리면 다시 시작됩니다 (동일한 mouseover 이벤트가 다시 트리거 됨).

나는 .stop()을 사용해 보았지만이 부분은 작동하지 않습니다.

하위 제목 (정거장/정류장) 사이를 빠르게 움직이면 정말 빠르게 색상이 떨어지는 것을 볼 수 있습니다.

JS

var parentList = $('.parent'); 

    // declare variables 
    var currentChildTitle; 
    var currentTitle; 
    var banner; 

    // setup append div function 
    function dropBanner(currentTitle){ 
     // create the banner variable dom node 
     banner = $('<div class="' + currentTitle + '"/></div>'); 
     // add it to the dom 
     $('.boxes').append(banner); 
     // animate it 
     $('.' + currentTitle).stop().slideDown(300); 
    } 

    // setup a function to limit the number of divs appended 
    function chop(){ 
     if ($('.boxes div').length > 15) { 
      $('.boxes div').eq(0).remove(); 
     } 
    } 

    // listen for mouseover the parent list items 
    parentList.on('mouseover', function(e) { 

     if (!($(this).find('.locations-wrapper').is(':visible'))) { 
      $(this).find('.locations-wrapper').stop().slideDown(300); 
     }; 

     // grab the current list item title 
     currentTitle = $(this).find('a').attr('title'); 

     // call dropBanner passing the current list item title 
     dropBanner(currentTitle); 
     chop(); 

    }); 

    // listen for mouseleave 
    parentList.on('mouseleave', function() { 
     $(this).find('.locations-wrapper').delay(300).slideUp(300); 
     $('.boxes div').delay(300).slideUp(300);  
    }); 

    // listen for mouseover the submenu list items 
    $('.sub-menu').on('mouseover', 'li', function(e){ 

     // grab the current list item title 
     currentTitle = $(this).find('a').attr('title'); 

     // call dropBanner passing the current list item title 
     dropBanner(currentTitle); 
     chop(); 

     // stop the bubbling up effect to parent list items 
     e.stopPropagation(); 
    }); 

편집 :와 이벤트의 완료를 듣고 시도 다음하지만 여전히 운 ..

이 함께 dropBanner 기능을 대체하지 않습니다. 유용한 링크 http://css-tricks.com/examples/jQueryStop/

새로운 JSFIDDLE

function dropBanner(currentTitle){ 
    // create the banner variable dom node 
    banner = $('<div class="' + currentTitle + '"/></div>'); 
    // add it to the dom 
    $('.boxes').append(banner); 
    // $('.' + currentTitle).stop().slideDown(300); 

    // animate it 
    if ($('.boxes').find('div').last().hasClass('animated')) {   
    $('.' + currentTitle).slideDown(300); 
    } else { 
    $('.' + currentTitle).addClass('animated').slideDown(300, function(){ 
     $('.' + currentTitle).removeClass('animated').dequeue(); 
    }); 
    } 
} 

Answer 1

사용 플래그 :

var adding = false; // global 

function dropDown(){ 
    adding = true; 
    .... 

    $('.' + currentTitle).stop().slideDown(300, function(){ 
     adding = false; // function called on completing animation 
    });  
} 

그런 다음 필요한 행사에 확인하십시오

if(adding) return; // do nothing 

DEMO은 - 더 if 구조를 추가해야 할 수도 당신이 원하는 곳