这里是真正简单的问题 - 如何添加 .hoverIntent plugin从 Brian Cherne 到以下代码代替 .live("hover", function
$(".highlight").live("hover", function(){
$(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"-94px", "margin-left":"-152px"}, 500);
});
完整代码如下:
$(document).ready(function(){
$('#sliding_grid li').hover(function() {
$(this).css('z-index',1).data('origTop',$(this).css('top')).data('origLeft',$(this).css('left')).addClass('highlight');
}, function() {
$(this).css('z-index', 0);
});
$(".highlight").live("hover", function(){
$(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"0", "margin-left":"0"}, 500);
});
$(".highlight").live("mouseout", function(){
$(this).animate({"width": "148px", "height":"90px", "top: ":$(this).data('origTop'), "left":$(this).data('origLeft'), "margin-top: ":"0", "margin-left":"0"}, 500, function(){
$(this).removeClass('highlight');
});
});
});
最佳答案
截至这个答案,插件的当前版本是“r7”,可以在这里找到:
http://cherne.net/brian/resources/jquery.hoverIntent.r7.js
对于版本“r7”,您可以将选择器作为第三个参数传递。这就像 delegate event在 jQuery 中。将 hoverIntent 添加到动态元素列表时,将 hoverIntent 事件绑定(bind)到父元素,并使用第三个参数添加要在其上使用 hoverIntent 的元素的选择器。
例如,如果您有一个 <li>
的列表将要更改的元素,并且您希望 hoverIntent 在每个 <li>
上触发然后您可以执行以下操作:
$("ul").hoverIntent(overFunction, outFunction, "li");
这是非常基础的,因此您需要更新 2 个选择器以匹配您的确切设置。
关于javascript - 将 "hoverIntent"添加到 .live 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4727099/