by Derek Du

As a mostly backend developer, I am shocked at how long it could take to adjust page layout and transition with CSS/jQuery and try to learn the stuff on the go. I have struggled for probably an hour just to get a logo to display the transition effect that when you move the mouse closer, it turns to a menu button.

So I setup a div containing both the logo and the button, using jQuery’s fadeIn and fadeout method to hide the logo and show the menu button when the mouse moves into this div, and show the logo and hide the menu button when it is out.

And I want one to disappear first before the second shows up. So in the Javascript code, I do this, which is causing problems.

The problem here is that if you move quickly into the interactive zone and move out quickly, jQuery has some weird behavior. This is what I think is happening:

Mouse moves in

Logo fades out, menu button fades in next

Mouse moves out

jQuery tries to fade out menu button, but it is not there yet, so jQuery thinks it faded out already, and starts to fade in the logo

Menu button now fades in

So both menu button and logo are shown

A live demo is here.

So I have to give up the ability to hide one first and then show the second because of this. Here is my solution:

However, this solution is incomplete, because jQuery queues up animations. Move in and out quickly a few times and you will see the queued animations being executed after you stop.

A live demo is here.

At this point, what we need to do is just to stop jQuery executing queued animation, which is made easy by the stop() method.

So here is a complete solution for this. I also replaced fadeIn and fadeOut with fadeTo, but both work.

A live demo is here.

Note that using CSS to change the opacity of the elements can achieve the same thing, with not much better performance, but I would prefer just to  use jQuery to solve a problem as simple as this and it provides a better cross-browser support.

This post originally appeared in Derek's blog, Stuff.