homepage Welcome to WebmasterWorld Guest from 54.227.146.68
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jQuery hover effect executing more than once
jQuery hover effect executing more than once
drooh




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

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

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved