JQUERY图像覆盖渐变in(）在鼠标悬停时淡入淡出

JQUERY image overlay fadeIn() fades in and out when mouseover

本文关键字：悬停 鼠标 淡入 淡出 覆盖 图像 渐变 in JQUERY      更新时间：2023-09-26

我正在寻找一个漂亮的平滑滚动图像，以便在一组按钮的父图像上进行渐变。

我将叠加图像堆叠在主图像的顶部，并将其设置为"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 -->

试试这个：

<script>
$(document).ready(function() {
    $(".hoverbox").on("mouseenter", function(){
        $(".overlay").stop(true, true).fadeIn();
    });
    $(".hoverbox").on("mouseleave", function(){
        $(".overlay").stop(true, true).fadeOut();
    });
}); 
</script>

我认为悬停在图像本身是个坏主意，在这里我使用父容器。此外，使用on（）方法现在是触发鼠标进入和离开事件的首选方式。

祝你好运！

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都已清理完毕。

css在这种情况下就足够了，请尝试下面的代码

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

并确保覆盖层具有更高的z索引

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

相关文章：