将“hoverIntent”添加到.live函数中

这里真正简单的问题 – 如何将Brian Cherne的.hoverIntent插件添加到以下代码中代替.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'); }); }); }); 

Answer 1

 function animateFn(){ $(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"-94px", "margin-left":"-152px"},200); } function reseteFn(){ $(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'); }); } var config = { over: animateFn, // function = onMouseOver callback (REQUIRED) timeout: 200, // number = milliseconds delay before onMouseOut out: reseteFn // function = onMouseOut callback (REQUIRED) }; $(".highlight").hoverIntent(config) 

Answer 2

截至这个答案，该插件的当前版本是“r7”，可以在这里找到：

http://cherne.net/brian/resources/jquery.hoverIntent.r7.js

使用版本“r7”，您可以将选择器作为第三个参数传递。 这就像jQuery中的委托事件 。 将hoverIntent添加到动态元素列表时，将hoverIntent事件绑定到父元素，并使用第三个参数添加要使用hoverIntent的元素的选择器。

例如，如果您有一个将要更改的

元素列表，并且您希望在每个

上触发hoverIntent，那么您可以执行以下操作：

 $("ul").hoverIntent(overFunction, outFunction, "li"); 

这是非常基本的，因此您需要更新2个选择器以匹配您的确切设置。

Answer 3

尝试替换此代码：

 $(".highlight").live("hover", function(){ $(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"0", "margin-left":"0"}, 500); }); 

有了这个：

 $('.highlight').live('mouseover', function() { if (!$(this).data('init')) { $(this).data('init', true); $(this).hoverIntent(function(){ $(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"0", "margin-left":"0"}, 500); }, function(){ /* mouseout logic */ }); $(this).trigger('mouseover'); } }); 

资源