Jquery hover with animation
Posted
by Brian
on Stack Overflow
See other posts from Stack Overflow
or by Brian
Published on 2010-05-13T11:50:18Z
Indexed on
2010/05/13
11:54 UTC
Read the original article
Hit count: 243
jQuery
|jquery-animation
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();
});
© Stack Overflow or respective owner
