.stop() for a setTimeout function

Question

I'm making a custom sub-menu animation that brings the opacity up for each item on my list. It all works well, but the problem comes when the user interacts faster than the animation itself. The usual way I deal with it is to put .stop() in my function and job done. But since I'm dealing with a .each() animation, I'm not quite sure what to do.

here's the code:

		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;
}



						News

	Gemas
	Joias
	Moda
	Variados
	Artouro
	Curiosidades


Ebooks
Contato
Loja Virtual
Site

Arun P Johny · Accepted Answer

Try to clear the timer on 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;
}



  
    News
      
        Gemas
        
        Joias
        
        Moda
        
        Variados
        
        Artouro
        
        Curiosidades
        
      
    
    Ebooks
    
    Contato
    
    Loja Virtual
    
    Site

.stop() for a setTimeout function

Answers (1)

Related Questions