Welcome to WebmasterWorld Guest from 23.20.230.24

Forum Moderators: open

Message Too Old, No Replies

jQuery hover effect executing more than once

jQuery hover effect executing more than once

     
9:41 pm on Nov 14, 2012 (gmt 0)

5+ Year Member



This is kind of hard to explain but here goes.

Ive got a side bar navigation that when you hover over an LI the right side text inside a div fades out and then in with the new text.

The problem Im having is that sometimes if you hover over the elements to quickly you will get both associated text inside the div!

Id like to have the jquery function know that another effect is in progress and not to allow anymore until there are none running.

Here is my code
$('li#ourPurpose a').hover(function(){
$('#wheelText div.active').fadeOut(1000, function() {
$('#purpose').hide().fadeIn(1000);
$('#purpose').addClass('active');
});
$('#intro, #betterWay').removeClass('active');
},function(){

});


$('li#aBetterWay a').hover(function(){
$('#wheelText div.active').fadeOut(1000, function() {
$('#betterWay').hide().fadeIn(1000);
$('#betterWay').addClass('active');
});
$('#intro, #purpose').removeClass('active');
},function(){

});


<ul id="leftNav">
<li id="ourPurpose"><a href="#">OUR PURPOSE</a></li>
<li id="aBetterWay"><a href="#">A BETTER WAY</a></li>
<li id="change"><a href="#">CHANGE</a></li>
<li id="theTest"><a href="#">THE TEST</a></li>
<li id="theIntegrityTest"><a href="#">THE INTEGRITY<br />TEST</a><br /></li>
<li id="aGoodFit"><a href="#">A GOOD FIT</a></li>
<li id="customizedPersonalizedEnergized"><a href="#">CUSTOMIZED,<br />PERSONALIZED,<br />& ENERGIZED</a></li>
</ul>

<div id="wheelText">

<div id="intro" class="cText active">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div id="purpose" class="cText hide">
<h1>OUR PURPOSE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div id="betterWay" class="cText hide">
<h1>A BETTER WAY</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

</div><!-- wheelText -->
 

Featured Threads

Hot Threads This Week

Hot Threads This Month