Question

HTML:

<div id="logo"></div>    
<div id="coming-soon"></div>

JavaScript:

$(document).ready(function(){
    $("#logo").hover(
        function(){
            $("#logo").fadeTo(300, 0);
            $("#coming-soon").fadeTo(300, 1.0);
        },
        function(){
            $("#logo").fadeTo(300, 1.0); 
            $("#coming-soon").fadeTo(300, 0); 
        });
});

Right now the #logo element fades out on hover and #coming-soon fades in, and vice versa when the mouse is taken off the element (which is exactly what I want), but mousing over the new element that’s faded in (the “Coming Soon” text) makes the old element fade in, when I don’t want it to fade back in until the mouse is no longer over the same area.

My question is how can I modify my code so hovering over the #coming-soon element doesn’t make the original element fade back in?

Answer 1

You can set #coming-soon‘s z-index to -1 (or give #logo a higher z-index).

Also, use .stop() before your fadeTo()s:

$("#logo").hover(
    function(){
        $("#logo").stop().fadeTo(300, 0);
        $("#coming-soon").stop().fadeTo(300, 1.0);
    },
    function(){
        $("#logo").stop().fadeTo(300, 1.0); 
        $("#coming-soon").stop().fadeTo(300, 0);
});