jQuery: Timer starten und abbrechen: hover intent

3. Dezember 2012 / Code / jQuery

---

×Info: This post is older than 2 years! Displayed information may be outdated!

Für JS-Hover-Menus gibt es dieses schöne Plugin. Das kann man aber auch schnell und schlank lösen.

Beispiel

# ein Menu soll erst nach 500ms ausklappen
# beim Verlassen des hover-Bereichs soll der Timer abbrechen
# das Menu soll nicht ausklappen

var myMenu = {
  
  intent : 500,
  
  state : undefined,
  
  openMenu : function () {
    $.data(this, 'timer', setTimeout(function() {
      $('#myMenu').stop(true, true).animate({
        height: '150px'
      }, 'fast');
      // console.log('menu successfully opened');
      // todo: set state in object to enabled
    }, myMenu.intent));
  },
  
  closeMenu : function () {
      clearTimeout($.data(this, 'timer'));
      $('#myMenu').stop(true, true).animate({
        height: '0'
      }, 'fast');
  },
  
  bindHoverEvents : function () {
  
    $('#menuTrigger').on('mouseenter', function() {
      // console.log('start timer for animation');
      myMenu.openMenu();
    });
    
    $('#menuTrigger').on('mouseleave', function() {
      // console.log('close menu animation or abort timer');
      myMenu.closeMenu();
    });
    
  },
  
  init : function () {
    this.bindHoverEvents();
  }

}

window.myMenu = myMenu;
myMenu.init();