2010-07-31 4 views
1

Je dois faire une erreur évidente, mais cela ne semble pas fonctionner.Impossible d'obtenir hoverIntent jquery plugin au travail

<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 fonctionne très bien, mais quand je l'utilise hoverIntent il ne fait absolument rien.

Répondre

0

hoverIntent doesn't have a single in/out function overload, à partir de la page principale:

jQuery .hover() peut prendre à la fois un handlerIn et un handlerOut,/ou/juste un handlerIn. Mon plug-in .hoverIntent() prend à la fois handlerIn et handlerOut, ou/ou un seul objet de configuration. Il n'a pas été conçu pour prendre juste un handlerIn comme .hover(). La prochaine version (r6) sera plus flexible.

Donc, pour obtenir ce que vous voulez, vous devez soit passer la même méthode deux fois, comme ceci:

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

Ou, un peu plus propre, vous pouvez utiliser la surcharge d'objets, et passer une fois, mais changer votre navSelect retourner cet objet à la place, comme ceci:

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

Merci qui fonctionne très bien, im encore à un niveau très basique avec javascript et tout cela l'objet de retour est vraiment déroutant pour moi –

Questions connexes