我必须犯一些明显的错误,但它似乎没有用。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.section').mouseover(function(){
$('#nav2').fadeOut(0).animate({"height":"30px"}, 250);
});
$('#section1').hoverIntent(navSelect('.interior','0px'));
$('#section2').hoverIntent(navSelect('.exterior','100px'));
$('#section3').hoverIntent(navSelect('.view','200px'));
function navSelect(section,selectorPosition){
return function(evt){
if ( $(section).is(':hidden')){
$('.subSection').fadeOut(250);
$(section).delay(250).fadeIn(250);
$('#selector').animate({"left":selectorPosition},250);
}}}
});
</script>
</head>
.hover工作得很好,但是当我使用hoverIntent时它什么也没做。
答案 0 :(得分:0)
hoverIntent
doesn't have a single in/out function overload,来自主页:
jQuery
.hover()
可以同时使用 handlerIn 和 handlerOut ,/或/只是 handlerIn 。我的.hoverIntent()
插件同时包含 handlerIn 和 handlerOut ,/或单个配置对象。它的设计不仅仅是像.hover()
那样只使用handlerIn。下一个版本(r6)将更加灵活。
所以为了获得你想要的东西,你要么必须传递两次相同的方法,如下所示:
$('#section1').hoverIntent(navSelect('.interior','0px'), navSelect('.interior','0px'));
或,有点干净,您可以使用对象重载,并传递一次,但更改您的navSelect
以返回该对象,如下所示:
function navSelect(section,selectorPosition){
var func = function(evt){
if ( $(section).is(':hidden')) {
$('.subSection').fadeOut(250);
$(section).delay(250).fadeIn(250);
$('#selector').animate({"left":selectorPosition},250);
}
}
return { over: func, out: func };
}