Question

http://leongaban.com/_stack/fade/

I’m just getting into jQuery and there are tons of tutorials out there on how to do this simple fade in and out, but coming from an AS3 background it seems like my code below should work, I’m curious as to why it doesn’t.

• On rollOver the Yellow box fades out
• However on rollOut the Yellow box kinda fades back in out then in again

Not sure why it ‘bounces’ the mouseout function… thoughts?

HTML

<div class="fade">
    <h2>The Title</h2>

    <p>Lorem ipsum.</p>
</div>

jQuery

<script>

    (function() {

        var fade = $('div.fade');

        fade.mouseover(function() {

                fade.fadeOut(500);

        });

        fade.mouseout(function() {

            fade.fadeIn(600);
        });

    })();

</script>

Answer 1

It’s because you’re fading out on mouseover. Once the fadeout is complete, the element is hidden. So the second you move the mouse, a mouseout event is registered, and it fades back in.

Try using .animate({opacity: 0}, 600);, and .animate({opacity: 1}, 600); etc.