fade out transition for .mouseout using .animate?

Question

I have a div that when you hover, another div shows up. They aren't parent/child or wrapped, so I used a script to get this to work the easiest I could and to have what I needed. With .mouseover the hover div slowly appears which is what I want.

My issue is getting the .mouseout to make the hover div slowly disappear and stay gone. I've tried different variations but the closest I got is to make the div slowly fade away, but it pops back up after the delay I had set.

I'm very new to js, really no experience at all. I wrote the first part of this code which works but the .mouseout is what I'm having issues with.

Here's my code:

$("#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); });

I know it's probably simple, but I don't know much if anything about js.

Here is the 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>

Here's a jsfiddle https://jsfiddle.net/yt3h9xnf/

can you add your ```html``` code in the question. More than that give the code in https://jsfiddle.net/ .It will help to give the answer for your question. — Senthurkumaran, Apr 19 '20 at 03:53
You're immediately setting `visibility: hidden` on the element... — Niet the Dark Absol, Apr 19 '20 at 03:59
Since you're using jQuery, try using `$(".stat-1_info").show();` and `.hide();` — Niet the Dark Absol, Apr 19 '20 at 04:00

score 0 · Accepted Answer · answered Apr 19 '20 at 04:20

You can use the .animate() method with either opacity or visibility. There is no reason to use both.

If you can't figure out which one to use read this answer here.

$("#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>

Manjuboyz · Answer 2 · 2020-04-19T04:36:55.250

Make it simple by using fadeIn() and fadeOut() with sec as parameter. This will take care of the time you want to see the text and want to disappear.
Use display:none; which is latest and best in market now than using visibility property.

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>

fade out transition for .mouseout using .animate?

2 Answers2