Can't get hoverIntent jquery plugin to work_问答_开发者

Can't get hoverIntent jquery plugin to work

开发者 https://www.devze.com 2023-01-10 03:46 出处：网络

I must be making some obvious mistake but it just doesn\'t seem to work. <head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />

I must be making some obvious mistake but it just doesn't seem to work.

<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(nav开发者_开发百科Select('.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 works just fine, but when i use hoverIntent it does absolutely nothing.

hoverIntent doesn't have a single in/out function overload, from the main page:

jQuery .hover() can take both a handlerIn and a handlerOut, /or/ just a handlerIn. My .hoverIntent() plug-in takes both handlerIn and handlerOut, /or/ a single configuration object. It was not designed to take just a handlerIn like .hover(). The next version (r6) will be more flexible.

So to get what you want, you either have to pass the same method twice, like this:

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

Or, a bit cleaner, you can use the object overload, and pass it once but change your navSelect to return that object instead, like this:

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