添加"hoverIntent"；到.live函数 [英] Adding "hoverIntent" to .live function

问题描述

这里一个简单的问题-如何从以下位置添加 .hoverIntent插件 Brian Cherne将以下代码替换为.live("hover", function

Real simple question here - how do I add the .hoverIntent plugin from Brian Cherne to the following code in place of the .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');   
            });        

        });        

    });

推荐答案

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函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！