本文介绍了添加"hoverIntent";到.live函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这里一个简单的问题-如何从以下位置添加 .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函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!