постепенный переход для .mouseout с использованием .animate?

Question

У меня есть div, который, когда вы парите, появляется другой div. Они не являются родителями, потомками или упакованы, поэтому я использовал скрипт, чтобы заставить его работать как можно проще и получить то, что мне нужно. С .mouseover медленно появляется div hover, чего я и хочу.

Моя проблема заключается в получении .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

1. Сделайте это проще, используя fadeIn() и fadeOut() с sec в качестве параметра. Это позаботится о времени, когда вы хотите увидеть текст и хотите исчезнуть.

2. Используйте display:none;, который является самым последним и лучшим на рынке в настоящее время, чем при использовании свойства visibility.

fadeIn ()

fadeOut ()

$(document).ready(function() {
  $("#show_stats1 h1").mouseover(function() {
    $(".stat-1_info").fadeIn(3000); // Choose your own time(3sec)
  });

  $("#show_stats1 h1").mouseout(function() {
    $(".stat-1_info").fadeOut(2000); // Choose your own time(2sec)
  });
});

.stats_container {
  width: 310px;
  padding: 10px;
  margin-bottom: 0px;
}

.stats {
  width: 300px;
  height: 34px;
  margin: 15px 0px -3px 0px;
}

.stats h1 {
  text-align: left;
}

.stats h2 {
  position: absolute;
  left: 260px;
  margin-top: 8px;
  width: 50px;
  text-align: right;
}

.stats h1 {
  display: inline-block;
  font-weight: 400;
  color: #000;
  line-height: 9.5pt;
  font-size: 9.5pt;
}

.stat-1_info {
  top: -50px;
  margin: 0px;
}

.stat-1_info {
  float: right;
  position: relative;
  left: 0px;
  display: inline-block;
  width: 380px;
  height: 334px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stats_container">
  <div id="show_stats1" class="stats">
    <h1>Strength:</h1>
  </div>
</div>


<div class="stat-1_info" style="display:none;">
  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
  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>

Answer 2

Вы можете использовать метод .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>