Fatal编程技术网
  • jquery/
  • Can'；t让hoverIntent jquery插件工作

Can'；t让hoverIntent jquery插件工作

jquery

Can'；t让hoverIntent jquery插件工作,jquery,hoverintent,Jquery,Hoverintent,我一定是犯了一些明显的错误，但似乎不起作用 <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/jav

我一定是犯了一些明显的错误，但似乎不起作用

<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>


无标题文件
$（文档）.ready（函数（）{
$（'.section'）.mouseover（函数（）{
$（'#nav2'）.fadeOut（0）.animate（{“height”：“30px”}，250）；
});
$（“#第1节”）.hoverIntent（导航选择（“.interior”和“0px”）；
$（“#Section 2”）.hoverIntent（导航选择（“.exterior”和“100px”）；
$（'#section3'）.hoverIntent（导航选择（'.view'，'200px'））；
功能导航选择（部分，选择器位置）{
返回函数（evt）{
如果（$（节）.is（':hidden'））{
美元（“.小节”）。淡出（250）；
美元（部分）.delay（250）.fadeIn（250）；
$（'#选择器'）。设置动画（{“左”：selectorPosition}，250）；
}}}
});
.hover工作正常，但当我使用hoverIntent时，它完全不起任何作用。

，从主页：

jQuery
.hover（）
可以同时使用handlerIn和handlerOut，/或/仅使用handlerIn。My
.hoverIntent（）
插件同时使用handlerIn和handlerOut，/或/单个配置对象。它的设计目的并不是像
.hover（）
那样只需要一个手柄。下一个版本（r6）将更加灵活

因此，要获得您想要的，您必须通过相同的方法两次，如下所示：

$('#section1').hoverIntent(navSelect('.interior','0px'), navSelect('.interior','0px'));

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 };
}
或者，更简洁一点，您可以使用对象重载，并传递它一次，但更改
navSelect
以返回该对象，如下所示：

$('#section1').hoverIntent(navSelect('.interior','0px'), navSelect('.interior','0px'));

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 };
}
感谢这项工作非常好，我对javascript还处于一个非常基本的水平，整个返回对象的事情让我非常困惑