jQuery hoverIntent不會觸發如果鼠標已經在文檔準備就緒的元素上

我正在使用jQuery插件hoverIntent。問題有時在頁面加載時，鼠標已經在對象'#gallery'上，並且因此不會觸發hoverIntent代碼。jQuery hoverIntent不會觸發如果鼠標已經在文檔準備就緒的元素上

這裏是我的代碼示例：

$(document).ready(function(){ 
    $('#gallery').hoverIntent(function(){ 
    $('.gallery-thumbs').stop().animate({'height': '65px'},400); //in code animating a element child within #gallery 
    },function(){ 
    $('.gallery-thumbs').stop().animate({'height': '33px'}); //out code animating a child element within #gallery 
    }); 
});

有誰知道一個解決方案嗎？

來源

2012-06-07 Daniel

你真的需要使用該插件？它似乎只是在等待用戶的鼠標變慢之前進行調用。它基本上是一個超時的.hover事件。另外，我認爲其他jQuery事件不會觸發，當jquery加載之前，鼠標在pageload上的元素。 –

如果你想繼續使用這個庫，我建議的一個解決方案是捕獲第一個鼠標移動事件（並且只有第一個，使用one），並檢查鼠標是否在#gallery這個時候。

您可以使用此檢查，如果一個事件是在一個對象：

var eventIsOver = function(event, o) { 
    if ((!o) || o==null) return false; 
    var pos = o.offset(); 
    var ex = event.pageX; 
    var ey = event.pageY; 
    if (
     ex>=pos.left 
     && ex<=pos.left+o.width() 
     && ey>=pos.top 
     && ey<=pos.top+o.height() 
    ) { 
     return true; 
    } 
    return false; 
}; 


$(document).ready(function(){ 
    $('body').one('mousemove', function(e) { 
    if (eventIsOver(e, $('#gallery')) { 
     // do what you want to do if the mouse is on the gallery initially 
    } 
    }); 
    $('#gallery').hoverIntent(function(){ 
    $('.gallery-thumbs').stop().animate({'height': '65px'},400); //in code animating a element child within #gallery 
    },function(){ 
    $('.gallery-thumbs').stop().animate({'height': '33px'}); //out code animating a child element within #gallery 
    }); 
});

來源

2012-06-07 20:07:58

我將如何使用此代碼？我會在哪裏傳遞元素名稱？ – Daniel

o是元素，例如$（'＃gallery'）。 –

我覺得有點愚蠢，但我無法弄清楚如何實現你的代碼。我將如何實現此代碼？如： eventIsOver（$（'＃gallery'））; ??? – Daniel

這是你在找什麼？

$(document).ready(function(){ 
    $(document).one("mousemove", function(e) { 
     if (mouse pointer is on gallery) { 
      $('.gallery-thumbs').stop().animate({'height': '65px'}, 400); 
     } 
    }); 

    $('#gallery').hoverIntent(function() { 
     $('.gallery-thumbs').stop().animate({'height': '65px'}, 400); //in code animating a element child within #gallery 
    },function() { 
     $('.gallery-thumbs').stop().animate({'height': '33px'}); //out code animating a child element within #gallery 
    }); 
});

來源

2012-06-07 20:20:27

是的我認爲這是我正在尋找的，現在我需要弄清楚「鼠標指針在畫廊」部分 – Daniel

我放棄了一個完美的解決方案，並設置好的用於內#gallery

$('.gallery-nav').mouseenter(function(){ 
    $('#gallery').trigger("mouseenter"); 
});

來源

2012-06-07 22:08:52 Daniel

子元素上觸發了mouseenter對於那些尋求另一種解決方案，這裏是我的：

$('myselector').hoverIntent({ 
    over: myOverfunc, 
    out: myOutfunc 
}); 

$('myselector').trigger('mouseenter.hoverIntent');

收費注意'mouseenter.hoverIntent'，因爲它是插件註冊的事件（在r7上測試過）。

來源

2013-07-09 08:45:03 Yoksy

它有一些問題，由於在那裏的一些錯誤js，

我已經做了所有的努力工作。你只需要添加選項

我已經解決了它。你可以從這裏得到js。，當你調用slimscroll函數中添加以下選項

鼠標懸停：真

作爲演示

jQuery('#scroll').slimScroll({ 
     height: jQuery(window).height()+'px', 
     railVisible: true, 
     allowPageScroll: true, 
     mouseOver:true 
    });

Visit Link/Download Here

來源

2015-04-16 09:58:09 nirmal

jQuery hoverIntent不會觸發如果鼠標已經在文檔準備就緒的元素上

回答

相關問題