将hoverIntent添加到jquery下拉菜单脚本

Question

嗨，大家，我想添加hoverIntent事件到我的jquery下拉菜单顶部链接，但我不知道我是如何做到这一点，请帮助下面是我从我的jQuery代码http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/ 我无法张贴在这里的代码，请在这里签http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.js

Answer 1

更新为使用动态驱动的jQuery的滑动菜单：

看到这里的例子：http://jsfiddle.net/vnvQn/

在动态驾驶中slidemenu.js更改此：

$curobj.hover(
       function(e) { 
        var $targetul = $(this).children("ul:eq(0)") 
        this._offsets = { 
         left: $(this).offset().left, 
         top: $(this).offset().top 
        } 
        var menuleft = this.istopheader ? 0 : this._dimensions.w 
        menuleft = (this._offsets.left + menuleft + this._dimensions.subulw > $(window).width()) ? (this.istopheader ? -this._dimensions.subulw + this._dimensions.w : -this._dimensions.w) : menuleft 
        if ($targetul.queue().length <= 1) //if 1 or less queued animations 
        $targetul.css({ 
         left: menuleft + "px", 
         width: this._dimensions.subulw + 'px' 
        }).slideDown(jqueryslidemenu.animateduration.over) 
       }, function(e) { 
        var $targetul = $(this).children("ul:eq(0)") 
        $targetul.slideUp(jqueryslidemenu.animateduration.out) 
       }) //end hover 

这样：

var hoverOver = function(e) { 
    var $targetul = $(this).children("ul:eq(0)") 
    this._offsets = { 
     left: $(this).offset().left, 
     top: $(this).offset().top 
    } 
    var menuleft = this.istopheader ? 0 : this._dimensions.w 
    menuleft = (this._offsets.left + menuleft + this._dimensions.subulw > $(window).width()) ? (this.istopheader ? -this._dimensions.subulw + this._dimensions.w : -this._dimensions.w) : menuleft 
    if ($targetul.queue().length <= 1) //if 1 or less queued animations 
     $targetul.css({ 
      left: menuleft + "px", 
      width: this._dimensions.subulw + 'px' 
     }).slideDown(jqueryslidemenu.animateduration.over) 
} 
var hoverOut = function(e) { 
    var $targetul = $(this).children("ul:eq(0)") 
    $targetul.slideUp(jqueryslidemenu.animateduration.out) 
} //end hover 

var config = {  
    over: hoverOver, // function = onMouseOver callback (REQUIRED)  
    timeout: 500, // number = milliseconds delay before onMouseOut  
    out: hoverOut // function = onMouseOut callback (REQUIRED)  
}; 

$curobj.hoverIntent(config); 

初始响应：

从公所Tonaka的Mega Dropdown Menu by Soh Tanaka

与HTML菜单结构像例如：

<ul id="topnav"> 
     <li> 
      <a href="#" class="home">Home</a> 
     </li> 
     <li> 
      <a href="#" class="products">Products</a> 
      <div class="sub"> 
       <ul> 
        <li><h2><a href="#">Desktop</a></h2></li> 
        <li><a href="#">Navigation Link</a></li> 
        <li><a href="#">Navigation Link</a></li> 
        <li><a href="#">Navigation Link</a></li> 
        <li><a href="#">Navigation Link</a></li> 
        <li><a href="#">Navigation Link</a></li> 
        <li><a href="#">Navigation Link</a></li> 
        <li><a href="#">Navigation Link</a></li> 
       </ul> 
      </div> 
     ... 

使用jQuery，如：

function megaHoverOver(){ 
     $(this).find(".sub").stop().fadeTo('fast', 1).show(); 

     //Calculate width of all ul's 
     (function($) { 
      jQuery.fn.calcSubWidth = function() { 
       rowWidth = 0; 
       //Calculate row 
       $(this).find("ul").each(function() {      
        rowWidth += $(this).width(); 
       }); 
      }; 
     })(jQuery); 

     if ($(this).find(".row").length > 0) { //If row exists... 
      var biggestRow = 0; 
      //Calculate each row 
      $(this).find(".row").each(function() {        
       $(this).calcSubWidth(); 
       //Find biggest row 
       if(rowWidth > biggestRow) { 
        biggestRow = rowWidth; 
       } 
      }); 
      //Set width 
      $(this).find(".sub").css({'width' :biggestRow}); 
      $(this).find(".row:last").css({'margin':'0'}); 

     } else { //If row does not exist... 

      $(this).calcSubWidth(); 
      //Set Width 
      $(this).find(".sub").css({'width' : rowWidth}); 

     } 
    } 

    function megaHoverOut(){ 
     $(this).find(".sub").stop().fadeTo('fast', 0, function() { 
      $(this).hide(); 
     }); 
    } 


    var config = {  
     sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)  
     interval: 100, // number = milliseconds for onMouseOver polling interval  
     over: megaHoverOver, // function = onMouseOver callback (REQUIRED)  
     timeout: 500, // number = milliseconds delay before onMouseOut  
     out: megaHoverOut // function = onMouseOut callback (REQUIRED)  
    }; 

    $("ul#topnav li .sub").css({'opacity':'0'}); 
    $("ul#topnav li").hoverIntent(config); 

Answer 2

我使用doTimeout plugin

doTimeout Hover Intent Page

而写类似这样

代码3210

$("#writer").find('.note, .task').hover(function() { 
      $(this).find('.listed').stop(true, true).doTimeout('listed', 250, 'slideDown', 'fast', 'easeInOutCubic'); 
     }, function(){ 
      $(this).find('.listed').stop(true, true).doTimeout('listed', 250, 'slideUp', 'fast', 'easeInOutCubic'); 
     });