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

Question

我期待獲得一個很好的平滑翻轉圖像淡入一個按鈕的父圖像。

我把我的覆蓋圖像疊加在我的主圖像的ontop上，它被設置爲「display：none;」。

我有以下jQuery，它可以在淡入淡出的圖像中工作，但當鼠標懸停在圖像上時，它會反覆淡入淡出。我的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

邁克爾的答案是一個很好的答案，並且可以正常工作，但最好使用CSS transitions作爲動畫並保留jQuery的行爲。

這是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; 
} 

下面是前一種方法的demo（類似於邁克爾的答案）。此外，你的CSS已經清理了兩個例子。