.stop（）用于setTimeout函数

时间：2015-08-20 04:41:06

标签： jquery queue

我正在制作一个自定义子菜单动画，为我列表中的每个项目带来不透明度。这一切都运行良好，但问题出现在用户比动画本身更快地进行交互时。我处理它的常用方法是将.stop（）放在我的函数和工作中。但由于我正在处理.each（）动画，我不太清楚该怎么做。

这是代码：

		var $temFilho = $('#menu-item-24'),
			$subMenu = $temFilho.children('.sub-menu'),
			$subli = $subMenu.children('li'),
			$subliC = $subli.length;

		$temFilho.mouseenter(function abreMenu () {
			$subMenu.addClass('menuAberto');
			$subli.each(function(i) {
				$(this).stop().delay(i*100).animate({opacity: 1}, 400);
			});
		});

		$temFilho.mouseleave(function fechaMenu () {
			$($subli.get().reverse()).each(function(i) {
				$(this).stop().delay(i*200).animate({opacity: 0}, 600);
			});
			setTimeout(function () {
				$subMenu.removeClass('menuAberto');
			}, ($subli.length*200)+600)
		});
nav.nav {
  clear: both;
  float: right;
  margin: 0;
  padding: 0;
  font-family: "adobe-caslon-pro",serif;
  font-size: 1rem;
  font-style: italic;
  margin-top: 30px;
}
nav.nav li {
  display: inline-block;
  list-style: none;
  padding: 5px 30px;
  position: relative;
  border-right: solid 2px #eee;
}
nav.nav li:last-child {
  border-right: none;
}
nav.nav li.menu-item-has-children:after {
  content: '';
  display: block;
  background-color: transparent;
  position: absolute;
  top: 25px;
  right: 10px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #eee;
}
nav.nav li ul.sub-menu {
  position: absolute;
  padding: 0;
  display: none;
}
nav.nav li ul.sub-menu.menuAberto {
  display: block;
}
nav.nav li ul.sub-menu li {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  opacity: 0;
}
nav.nav li ul.sub-menu li a {
  display: block;
  border-top: solid 1px #eee;
  background-color: white;
  padding: 10px 30px;
}
nav.nav li ul.sub-menu li a:hover {
  background-color: #eee;
  color: #fff;
}
nav.nav li ul.sub-menu li:first-child a {
  border-top: none;
}
nav.nav li ul.sub-menu li:last-child a {
  border-radius: 0 0 10px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav" role="navigation">
						<ul><li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-24"><a href="http://localhost/artouro/">News</a>
<ul class="sub-menu">
	<li id="menu-item-25" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25" style="opacity: 0;"><a href="http://localhost/artouro/category/gemas/">Gemas</a></li>
	<li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26" style="opacity: 0;"><a href="http://localhost/artouro/category/joias/">Joias</a></li>
	<li id="menu-item-27" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27" style="opacity: 0;"><a href="http://localhost/artouro/category/moda/">Moda</a></li>
	<li id="menu-item-28" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-28" style="opacity: 0;"><a href="http://localhost/artouro/category/variados/">Variados</a></li>
	<li id="menu-item-29" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-29" style="opacity: 0;"><a href="http://localhost/artouro/category/artouro/">Artouro</a></li>
	<li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-30" style="opacity: 0;"><a href="http://localhost/artouro/category/curiosidades/">Curiosidades</a></li>
</ul>
</li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost/artouro/ebooks/">Ebooks</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost/artouro/pagina-exemplo/">Contato</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23"><a href="http://loja.artouro.com.br/">Loja Virtual</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="http://artouro.com.br/">Site</a></li>
</ul>					</nav>

1 个答案:

答案 0 :(得分：1)

尝试清除mouseenter上的计时器

var $temFilho = $('#menu-item-24'),
  $subMenu = $temFilho.children('.sub-menu'),
  $subli = $subMenu.children('li'),
  $subliC = $subli.length,
  temFilhoTimer;

$temFilho.mouseenter(function abreMenu() {
  $subMenu.addClass('menuAberto');
  $subli.stop(true).each(function(i) {
    $(this).delay(i * 100).animate({
      opacity: 1
    }, 400);
  });
  clearTimeout(temFilhoTimer)
});

$temFilho.mouseleave(function fechaMenu() {
  $($subli.get().reverse()).stop(true).each(function(i) {
    $(this).delay(i * 200).animate({
      opacity: 0
    }, 600);
  });
  temFilhoTimer = setTimeout(function() {
    $subMenu.removeClass('menuAberto');
  }, ($subli.length * 200) + 600)
});
nav.nav {
  clear: both;
  float: right;
  margin: 0;
  padding: 0;
  font-family: "adobe-caslon-pro", serif;
  font-size: 1rem;
  font-style: italic;
  margin-top: 30px;
}
nav.nav li {
  display: inline-block;
  list-style: none;
  padding: 5px 30px;
  position: relative;
  border-right: solid 2px #eee;
}
nav.nav li:last-child {
  border-right: none;
}
nav.nav li.menu-item-has-children:after {
  content: '';
  display: block;
  background-color: transparent;
  position: absolute;
  top: 25px;
  right: 10px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #eee;
}
nav.nav li ul.sub-menu {
  position: absolute;
  padding: 0;
  display: none;
}
nav.nav li ul.sub-menu.menuAberto {
  display: block;
}
nav.nav li ul.sub-menu li {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  opacity: 0;
}
nav.nav li ul.sub-menu li a {
  display: block;
  border-top: solid 1px #eee;
  background-color: white;
  padding: 10px 30px;
}
nav.nav li ul.sub-menu li a:hover {
  background-color: #eee;
  color: #fff;
}
nav.nav li ul.sub-menu li:first-child a {
  border-top: none;
}
nav.nav li ul.sub-menu li:last-child a {
  border-radius: 0 0 10px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav" role="navigation">
  <ul>
    <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-24"><a href="http://localhost/artouro/">News</a>
      <ul class="sub-menu">
        <li id="menu-item-25" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25" style="opacity: 0;"><a href="http://localhost/artouro/category/gemas/">Gemas</a>
        </li>
        <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26" style="opacity: 0;"><a href="http://localhost/artouro/category/joias/">Joias</a>
        </li>
        <li id="menu-item-27" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27" style="opacity: 0;"><a href="http://localhost/artouro/category/moda/">Moda</a>
        </li>
        <li id="menu-item-28" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-28" style="opacity: 0;"><a href="http://localhost/artouro/category/variados/">Variados</a>
        </li>
        <li id="menu-item-29" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-29" style="opacity: 0;"><a href="http://localhost/artouro/category/artouro/">Artouro</a>
        </li>
        <li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-30" style="opacity: 0;"><a href="http://localhost/artouro/category/curiosidades/">Curiosidades</a>
        </li>
      </ul>
    </li>
    <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost/artouro/ebooks/">Ebooks</a>
    </li>
    <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost/artouro/pagina-exemplo/">Contato</a>
    </li>
    <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23"><a href="http://loja.artouro.com.br/">Loja Virtual</a>
    </li>
    <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="http://artouro.com.br/">Site</a>
    </li>
  </ul>
</nav>

相关问题
最新问题