The problem is synchronicity. When you add an animation (like "slow"
or "fast") the animation process starts but, behind the scenes,
subsequent lines of javascript continue to execute during the
animation.
When you need things in strict order, and you have an animation, use
the callback, which will fire once the animation is complete.
In other words, use show(speed, callback) and hide(speed, callback).
**--** Steve
On Sep 10, 10:18 am, GLSmyth <george.sm...@gmail.com> wrote:
> I am missing something fundamental and am sure that someone can point
> me in the right direction.
>
> I have a list like so:
>
> <li id="GalleryMenu"><a href="../Gallery/Default.htm">DD</a>
> <ul class="DoNotDisplay">
> <li><a href="../Gallery/Santuary.htm">Santuary</a></li>
> <li><a href="../Gallery/Stream.htm">Stream</a></li>
> <li><a href="../Gallery/Winter.htm">Winter</a></li>
> </ul>
> </li>
>
> I have styled it so that the list items float. The class DoNotDisplay
> hides the unordered list. When the mouse hovers over GalleryMenu then
> jQuery removes the DoNotDisplay class so that the unordered list is
> displayed, moving off GalleryMenu hides the list. This works fine and
> the code is:
>
> $(document).ready(
> function() {
> $('li#GalleryMenu').add('li#PoemMenu').hover(
> function() {
> $(this).children('ul').removeClass('DoNotDisplay');
> },
> function() {
> $(this).children('ul').addClass('DoNotDisplay');
> }
> );
> }
> );
>
> I would like the unordered list to slide open, so I changed the code
> to:
>
> $(document).ready(
> function() {
> $('li#GalleryMenu').add('li#PoemMenu').hover(
> function() {
> $(this).children('ul').show('fast');
> console.log('Open list');
> },
> function() {
> $(this).children('ul').hide('fast');
> console.log('Close list');
> }
> );
> }
> );
>
> The list opens properly, but does not close when I move the mouse from
> the list. When looking at this in Firebug I see that 'hide' is
> firing, but for some reason does not close the list. If I "unfloat"
> the list then the code works just fine.
>
> What am I missing? I'm sure that it is staring me in the face, but I
> am just not seeing it. The full code can be found
> athttp://glsmyth.com/Sedwick/Templates/
>
> Thanks for looking.
>
> Cheers -
>
> george
