Question

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

截至此答案，该插件的当前版本为“r7”，可在此处找到：

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

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

例如，如果您有一个<li>元素的列表，这些元素将会发生变化，并且您希望在每个<li>上触发hoverIntent，那么您可以执行以下操作：

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

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

Answer 2

尝试替换此代码：

$(".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');  
  }  
});

Source

Answer 3

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)

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

3 个答案: