Problème d'animation jQuery ui

Question

J'ai un menu avec quelques boutons (ancres).
Je veux que quand un certain bouton est pressé un élément div apparaîtra dans une animation de diapositive.
Je veux aussi que lorsque l'utilisateur survole l'autre bouton, l'élément div se cache dans une animation.
Le problème est que si je déplace rapidement la souris sur les autres éléments, l'animation de masquage se répète un certain nombre de fois. Voici le code:
Javascript/jQuery:

$(document).ready(function() { 

    $("#shiurButton").click(function(event) { 
    //Shows the div element 
     $(".shiurPicker").toggle('slide', {direction:'right'}, 1000); 
    }); 

    $("#testButton").mouseover(function(event){ 
     if ($(".shiurPicker").is(":visible")){ 
      $(".shiurPicker").hide('slide', {direction:'right'}, 1000); 
     } 
    }); 

    $("#dictionaryButton").mouseover(function(event) { 
     if ($(".shiurPicker").is(":visible")){ 
      $(".shiurPicker").hide('slide', {direction:'right'}, 1000); 
     } 
    }); 

    $("#helpButton").mouseover(function(event) { 
     if ($(".shiurPicker").is(":visible")){ 
      $(".shiurPicker").hide('slide', {direction:'right'}, 1000); 
     } 
}); 

}); 

Toutes les idées?
Merci

Answer 1

Tout d'abord, combinez les animations qui font la même chose. puis ajouter une étape() aux animations:

$("#shiurButton").click(function(event) { 
    //Shows the div element 
    $(".shiurPicker").stop(true, true).toggle('slide', {direction:'right'}, 1000); 
}); 

$("#testButton, #dictionaryButton, #helpButton").mouseover(function(event){ 
    if ($(".shiurPicker").is(":visible")){ 
     $(".shiurPicker").stop(true, true).hide('slide', {direction:'right'}, 1000); 
    } 
}); 

---

MISE À JOUR:

Utilisation data():

$(document).ready(function() { 

    $("#shiurButton").click(function(event) { 
     $(".shiurPicker").stop(true, true).show('slide', { 
      direction: 'right' 
     }, 1000); 
     $(".shiurPicker").data('hide', false); 
    }); 

    $("#testButton, #dictionaryButton, #helpButton").mouseover(function(event) { 
     var hide = $(".shiurPicker").data('hide'); 
     if(hide == false){ 
      $(".shiurPicker").stop(true, true).hide('slide', { 
       direction: 'right' 
      }, 1000); 
      $(".shiurPicker").data('hide', true); 
     } 
    }); 
}); 

Fiddle: http://jsfiddle.net/maniator/UW9gf/