JQuery UI .show('slide') not animating correctly

Question

I am trying to make a div that slides out nicely when you mouse over a "trigger". It is appearing in full, then quickly disappearing and sliding out again. I can't seem to figure out the reason for this behavior.

If needed I can put a sample up in a bit. Test case is up here. This is happening on all major browsers except IE6.

HTML:

 <div class='wrap'>
 <div id='navtitle'>
   NAV>>
 </div>
  <div id='nav'>
   <div id='navlist' class='rounded curvyRedraw'>
    <div class='top'><div></div></div>
    <ul>
     <li><a href='#'>Home</a></li>
     <li><a href='#'>Singles</a></li>
     <li><a href='#'>Supplies</a></li>
     <li><a href='#'>Cart</a></li>
    </ul>
   </div>

  </div>
 </div>

Javascript:

 $(document).ready(function (){
$('#navlist').hide();
$('#navtitle').bind("mouseenter", function(){
 $('#navlist').show('slide');
});
$('#nav').bind("mouseleave", function(){
 $('#navlist').hide('slide');
  });

Answer 1

It would help to see an example. The first thing that sticks out is the >>. Any change when you remove them? It shouldn't be an issue (< is more of a problem for browsers), but figured I'd ask.

Answer 2

I think some of the problems are due to the focus changing as the div slides out, resulting in the handlers being invoked as focus changes, though I could be wrong on this. It might be because of how jQuery handles cross browser mouse events (not all browsers have the same events so jQuery might be approximating them). I was able to get it to "mostly" work by applying the mouse event handlers to handle a single event and using callbacks to make sure that only one is live at any given time so there is no switching back and forth between them. Note I had to give explicit direction/speed for hide or it simply disappeared. Not sure why, though it might have something to do with how my example is set up and the div simply disappearing once the left edge of the list elements are off the page.

$(function() {
    $('#navlist').hide();
    $('#navtitle').one('mouseenter', showOnEnter);
});

function showOnEnter() {
    $('#navlist').show('slide', function() {
        $('#nav').one('mouseleave', function() {
            $('#navlist').hide('slide', { direction: 'left' }, 1000,  function() {
                $('#navtitle').one('mouseenter',showOnEnter);
            });
        });
    });
}