Jquery hover with animation
- by Brian
anyone know how to stop a .hover happening again before the mouseout animation has finished?
I have the following code which has 4 anchors. Once hovered over the anchor the related anchor slides in using animation. My problem is you hover out and in quickly, before the square has been set back to 0px it increases the slide distance.
<body class="home">
<div id="container">
<a class="page-link homet" id="anim-1"></a>
<a class="page-link about" id="anim-2"></a>
<a class="page-link portfolio" id="anim-3"></a>
<a class="page-link contacts" id="anim-4"></a>
<div id="header">
<div id="logo">
</div>
<ul id="navigation">
<li><a id="1"></a></li>
<li><a id="2"></a></li>
<li><a id="3"></a></li>
<li><a id="4"></a></li>
</ul>
</div>
<div id="main">
<div id="left-content">
</div>
<div id="main-content">
</div>
</div>
</div>
</body>
</html>
Jquery
var cc = {
displayAnim : function () {
actionLink = $("#container #header #navigation li a");
movePosition = "0";
$("#container a.page-link").css({ position:"absolute", right: 0});
$(actionLink).hoverIntent(
function() {
circleToReveal = $(this).attr('id');
switch (circleToReveal) {
case "1" :
movePostion = "386"
break;
case "2" :
moveposition = "514"
break;
case "3" :
movePosition = "643"
break;
case "4" :
movePosition = "400"
break;
default :
movePosition = "772"
};
/* console.log(movePosition); */
$("#container #anim-" +circleToReveal+ "").stop().animate({"right": "+="+ movePosition +"px"}, "slow");
},
function() {
$("#container #anim-" +circleToReveal+ "").stop().animate({"right": "-="+ movePosition +"px"}, "slow");
}
);
}
};
$(window).load (function () {
$("body").addClass('js');
$("a.pagelink").hide();
cc.displayAnim();
});
