时间戳

首页 > 解决方案 > 使用.animate 为.mouseout 淡出过渡？

javascript - 使用.animate 为.mouseout 淡出过渡？

问题描述

我有一个 div，当你悬停时，另一个 div 会出现。它们不是父/子或包装，所以我使用了一个脚本来让它最简单地工作并拥有我需要的东西。使用 .mouseover，悬停 div 会慢慢出现，这正是我想要的。

我的问题是让 .mouseout 使悬停 div 慢慢消失并保持消失。我尝试了不同的变化，但我得到的最接近的是让 div 慢慢消失，但它会在我设置的延迟后弹出。

我对js很陌生，真的一点经验都没有。我编写了这段代码的第一部分，但 .mouseout 是我遇到的问题。

这是我的代码：

$("#show_stats1 h1").mouseover(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 200); });

$("#show_stats1 h1").mouseout(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1}, 200); });

我知道这可能很简单，但我对 js 了解不多。

这是html：

<div id="show_stats1" class="stats">
    main, visible div
</div>


<div class="stat-1_info" style="visibility:hidden;">
    hidden div to be shown on hover
</div>

这是一个 jsfiddle https://jsfiddle.net/yt3h9xnf/

标签： javascriptjqueryhtmlcss

解决方案

您可以将该.animate()方法与opacity或一起使用visibility。没有理由同时使用两者。

如果您不知道使用哪一个，请在此处阅读此答案。

$("#show_stats1 h1").mouseover(function() { 
  $(".stat-1_info").animate({opacity: 1}, 200);
});

$("#show_stats1 h1").mouseout(function() { 
  $(".stat-1_info").animate({opacity: 0}, 200);
});
.stat-1_info {
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="show_stats1" class="stats">
    <h1>main, visible div</h1>
</div>

<div class="stat-1_info">
    hidden div to be shown on hover
</div>

推荐阅读