Doing some magic with JQuery

Doing some magic with JQuery

Hello all,

I have this problem that I can't solve...
I have two links. I want to show a text when none of them is hover, and then, when the mouse is over one of the links, fade out the current text and fade in the related one.

The thing is, when doing it slowly and in order it works fine. But if you pass the mouse over both links quickly you can get the effect that both text are activated. I also tried the "if  :animated  then stop()" but I couldn't make it work.

I have tried many things, unsuccessfully. I don't want to modify the markup and create a dummy div containing the text to be shown.

This is the code. Thank you.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html><head><title>Example</title>
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  4. <script type="text/javascript">

  6. $(document).ready(function () {

  8.         $('#element1').hover(function() {
  10. $('#text1').fadeOut(1000, function() {
  11. $('#text3').fadeOut(1000, function() {
  12. $('#text2').fadeIn(1000);
  13. });
  14. });  
  15.     },function(){
  16. $('#text2').fadeOut(1000,function() {
  17. $('#text1').fadeIn(1000); });
  18.   });
  19. });

  21. $(document).ready(function () {

  23.         $('#element2').hover(function() {
  25. $('#text1').fadeOut(1000, function() {
  26. $('#text2').fadeOut(1000, function() {
  27. $('#text3').fadeIn(1000);
  28. });
  29. });  
  30.     
  31. },function(){
  32. $('#text3').fadeOut(1000,function() {
  33. $('#text1').fadeIn(1000); });
  34.   });
  35. });

  37. </script>
  38. <style type="text/css"> 
  39. #text2,#text3{
  40. display:none;
  41. }
  42. </style>

  44. </head>
  45. <body>
  46. <h2 id="text1">When no hover</h2>
  47.     <h2 id="text2">When hover element1</h2>
  48.     <h2 id="text3">When hover element2</h2>     
  49. <ul>
  50. <li><a id="element1" href="#">Show text2</a></li>
  51. <li><a id="element2" href="#">Show text3</a></li>
  52. </ul>
  53. </body>
  54. </html>