I am looking to get a nice smooth rollover image to fadeIn over the parent image for a set of buttons.

I have my overlay image stacked ontop of my main image, and it's set to "display: none;".

I have the following jQuery, and it works to FadeIn the overlay image, but it fades it in and out repeatedly when the mouse is over the image. Do I have something wrong in the syntax for my jQuery? Thanks in advance.

 <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".main").mouseenter(function() {
            jQuery(".overlay").fadeIn();
        });

        jQuery(".main").mouseleave(function() {
            jQuery(".overlay").fadeOut();
        });
    }); 

 </script>

and my HTML code:

<style type="text/css">
<!--
   .hoverbox { position: relative; }
   .main { width: 243px; height: 117px; }
   .overlay { position: absolute; width: 243px; height: 117px; top: 0; left: 0; display: none; }
-->
</style>

    <!-- button 1 -->
    <div class="hoverbox" style="float: left; width: 243px; height: 117px;">
        <a href="/locations/sacramento-international-airport/">
            <img class="main" src="/images/home-button-smf_orig.jpg" />
            <img class="overlay" src="/images/home-button-smf_rollover.jpg" />
        </a>
    </div>
    <!-- end button 1 -->

I am looking to get a nice smooth rollover image to fadeIn over the parent image for a set of buttons.

I have my overlay image stacked ontop of my main image, and it's set to "display: none;".

I have the following jQuery, and it works to FadeIn the overlay image, but it fades it in and out repeatedly when the mouse is over the image. Do I have something wrong in the syntax for my jQuery? Thanks in advance.

 <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".main").mouseenter(function() {
            jQuery(".overlay").fadeIn();
        });

        jQuery(".main").mouseleave(function() {
            jQuery(".overlay").fadeOut();
        });
    }); 

 </script>

and my HTML code:

<style type="text/css">
<!--
   .hoverbox { position: relative; }
   .main { width: 243px; height: 117px; }
   .overlay { position: absolute; width: 243px; height: 117px; top: 0; left: 0; display: none; }
-->
</style>

    <!-- button 1 -->
    <div class="hoverbox" style="float: left; width: 243px; height: 117px;">
        <a href="/locations/sacramento-international-airport/">
            <img class="main" src="/images/home-button-smf_orig.jpg" />
            <img class="overlay" src="/images/home-button-smf_rollover.jpg" />
        </a>
    </div>
    <!-- end button 1 -->

• javascript
• jquery
• html
• css

3 Answers 3

Try this instead:

<script>

$(document).ready(function() {

    $(".hoverbox").on("mouseenter", function(){

        $(".overlay").stop(true, true).fadeIn();

    });

    $(".hoverbox").on("mouseleave", function(){

        $(".overlay").stop(true, true).fadeOut();

    });

}); 

</script>

I think hovering over the image itself was a bad idea, here I use the parent container. Also, using the on() method is now the preferred way to trigger mouse enter and leave events.

Good luck!

Michael's answer is a good one and will work, but it may be preferable to use CSS transitions for the animation and reserve jQuery for the behavior.

Here's a demo.

JavaScript

$(".hoverbox")
    .mouseenter(function () {
        $(this).addClass("on");
    })
    .mouseleave(function () {
        $(this).removeClass("on");
    });

CSS

.overlay {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -transition: .4s;
}

.hoverbox.on .overlay {
    opacity: 1;
}

Here's a demo of the former approach (similar to Michael's answer). Also, your CSS has been cleaned up for both examples.

css is enough in this case, try the below code

.main:hover + .overlay{ display:block; }

and make sure overlay has a higher z-index

.overlay { 
      position: absolute; width: 243px; height: 117px; 
      top: 0; left: 0; display: none; z-index: 2;
 }

http://jsfiddle/Grhqn/1/

for graceful fading

 .overlay {
    position: absolute; width: 243px;  height: 117px;   top: 0;
    left: 0;   z-index: 2;   transition: opacity 1.5s ease;  opacity:0;
}

.overlay:hover {  opacity:1;  }

http://jsfiddle/Grhqn/3/