当鼠标悬停时,JQUERY图像叠加fadeIn()淡入淡出

Question

我希望得到一个漂亮的平滑翻转图像fadeIn在父图像上的一组按钮.

我的叠加图像堆叠在我的主图像的顶部,并设置为"display:none;".

我有以下jQuery,它适用于FadeIn叠加图像,但当鼠标悬停在图像上时,它会反复淡入淡出.我的jQuery语法有问题吗？提前致谢.

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

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

 </script>

和我的HTML代码:

<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 -->

Answer 1

试试这个:

<script>

$(document).ready(function() {

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

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

    });

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

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

    });

}); 

</script>

我认为将鼠标悬停在图像本身上是一个坏主意,在这里我使用父容器.此外,使用on()方法现在是触发鼠标进入和离开事件的首选方法.

祝好运!