Добавление «hoverIntent» в .live функции

Question

Реальный простой вопрос здесь - как я добавить .hoverIntent plugin от Brian Чернэ на следующий код вместо .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

Попробуйте заменить этот код:

$(".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

Как этого ответа, текущая версия плагина "r7", который можно найти здесь:

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

С версии «r7», вы можете передать селектор в качестве третьего параметра. Это похоже на delegate event в jQuery. При добавлении hoverIntent в список динамических элементов привяжите событие hoverIntent к родительскому элементу и используйте третий параметр, чтобы добавить селектор элемента, для которого вы хотите использовать hoverIntent.

Например, если у вас есть список <li> элементов, которые будут меняться, и вы хотите, чтобы hoverIntent огонь по каждому <li>, то вы можете сделать следующее:

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

Это очень простой, так что вы бы хотите обновить 2 селектора в соответствии с вашей точной настройкой.