使用 .animate 淡出 .mouseout 的过渡？

Question

我有一个 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/

Answer 1

您可以将该.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>

Answer 2

fadeIn()通过使用andfadeOut()作为sec参数使其变得简单。这将照顾您想要看到文本并想要消失的时间。使用display:none;现在市场上最新、最好的而不是使用visibility房产。淡入（）消退（）$(document).ready(function() {&nbsp; $("#show_stats1 h1").mouseover(function() {&nbsp; &nbsp; $(".stat-1_info").fadeIn(3000); // Choose your own time(3sec)&nbsp; });&nbsp; $("#show_stats1 h1").mouseout(function() {&nbsp; &nbsp; $(".stat-1_info").fadeOut(2000); // Choose your own time(2sec)&nbsp; });});.stats_container {&nbsp; width: 310px;&nbsp; padding: 10px;&nbsp; margin-bottom: 0px;}.stats {&nbsp; width: 300px;&nbsp; height: 34px;&nbsp; margin: 15px 0px -3px 0px;}.stats h1 {&nbsp; text-align: left;}.stats h2 {&nbsp; position: absolute;&nbsp; left: 260px;&nbsp; margin-top: 8px;&nbsp; width: 50px;&nbsp; text-align: right;}.stats h1 {&nbsp; display: inline-block;&nbsp; font-weight: 400;&nbsp; color: #000;&nbsp; line-height: 9.5pt;&nbsp; font-size: 9.5pt;}.stat-1_info {&nbsp; top: -50px;&nbsp; margin: 0px;}.stat-1_info {&nbsp; float: right;&nbsp; position: relative;&nbsp; left: 0px;&nbsp; display: inline-block;&nbsp; width: 380px;&nbsp; height: 334px;&nbsp; background: red;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="stats_container">&nbsp; <div id="show_stats1" class="stats">&nbsp; &nbsp; <h1>Strength:</h1>&nbsp; </div></div><div class="stat-1_info" style="display:none;">&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam&nbsp; ipsum nulla, sodales non ornare et, accumsan a sem. Donec tempus leo non laoreet viverra. Vestibulum ac nunc sem. Aenean vitae convallis velit, non molestie augue. Curabitur tristique eleifend mi, malesuada fringilla erat tristique imperdiet.</div>