我有以下导航菜单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();
});
}
}
使用标志:
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
构造