鼠標懸停時，JQUERY圖像疊加層fadeIn（）淡入和淡出

Question

我希望獲得一個很好的平滑過渡圖像，以便在父圖像上淡入淡出一組按鈕。

我將疊加圖像堆疊在主圖像的頂部，並將其設置為“顯示：無；”。

我有以下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（）方法是觸發鼠標進入和離開事件的首選方法。

祝好運！

Answer 2

在這種情況下，css就足夠了，請嘗試以下代碼

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

並確保疊加層具有較高的z-index

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

http://jsfiddle.net/Grhqn/1/

優雅的褪色

 .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.net/Grhqn/3/

Answer 3

Michael的答案是一個很好的答案，並且可以用，但最好使用CSS過渡制作動畫，並保留jQuery的行為。

這是一個演示 。

的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;
}

這是前一種方法的演示 （類似於Michael的回答）。 此外，您的CSS已針對這兩個示例進行了清理。