javascript - 等到 jquery 动画/幻灯片完成后再开始新的动画/幻灯片

Question

我有以下导航菜单 JSFIDDLE

我想让每个鼠标悬停事件等到动画包含完成后再开始一个新的动画，如果新的菜单项悬停在上面(再次触发相同的鼠标悬停事件)，该动画就会开始。

我尝试过使用 .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
     });    
}

然后 checkin 所需的事件:

if(adding) return; // do nothing

DEMO - 可能需要在您想要的位置添加更多 if 结构