.live機能に「hoverIntent」を追加

Question

実簡単な質問 - 私は.live("hover", function

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

     }); 

の代わりに、次のコードにブライアンCherneから.hoverIntent pluginを追加するにはどうすればよいここでは完全なコードです：

$(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"では、セレクタを3番目のパラメータとして渡すことができます。これはjQueryのdelegate eventと似ています。動的要素のリストにhoverIntentを追加する場合は、hoverIntentイベントを親要素にバインドし、3番目のパラメータを使用して、hoverIntentを使用する要素のセレクタを追加します。あなたが変更されます<li>要素のリストを持っているとあなたはhoverIntentは各<li>上で起動するようにしたいならば、あなたは次の操作を行うことができる。例えば

、：

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

これは非常に基本的なものですので、あなたが希望正確な設定に合わせて2つのセレクタを更新したいと考えています。