Hide and show text only when needed with jquery

Question

I have a link and some text. Whenever I link to a link, the text should be displayed with an interval of 1200 seconds and should be hidden immediately when I remove the cursor from the link. Therefore, according to what I wrote, whenever I put a link on a link, the text appears after 1200 seconds, and after the text was displayed, when I remove the cursor from the link, the text becomes hidden, which is good. but whenever I hold the cursor on the link and remove the cursor from the link before the text is displayed, the text is still displayed, and I do not want it to be shown. The text should be hidden immediately when I remove the cursor from the link.

Is there any way to do this. I provided the code that I wrote below: Please take a look at this, thanks in advance :)

$('a').hover(function(){
    setTimeout(function(){
    $('.show-hide').css("visibility", "visible")}, 1200);
}, 
function(){
     $('.show-hide').css("visibility", "hidden");
});

.show-hide{
  visibility : hidden;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><p> Hover here </p></a>


<p class="show-hide"> This should be shown when hovered </p>

<p class="show-hide"> This should be shown when hovered </p>

Run codeHide result

Answer 1

This is because the function show()is executed when you hover over it, and even when you leave the mouse before 1.2 seconds, you do not interfere with it, it will show the text after the delay is completed.

You need to complete hide()when mouseleave. this way it will stop the function show(). Try the snapshot below:

$(document).ready(function(){
  $('.show-hide').hide();
  //This is for showing the text with delay 1.2 sec
  $('a').mouseenter(function(){
    $('.show-hide').show(1200);
  });
  //This is for hiding the text with no delay
  $('a').mouseleave(function(){
    $('.show-hide').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><p>Hover here</p></a>

<p class="show-hide"> This should be shown when hovered </p>
<p class="show-hide"> This should be shown when hovered </p>

Run codeHide result

Answer 2

You can simply use the regular css transition to achieve this effect. try using this code

a:hover ~ .show-hide{
        visibility:visible;
        tranistion:all ease-out;
        transition-delay:1.2s;
    }
    .show-hide{
      visibility:hidden;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><p> Hover here </p></a>
    
    
    <p class="show-hide"> This should be shown when hovered </p>
    
    <p class="show-hide"> This should be shown when hovered </p>

Run codeHide result

Answer 3

. .

var isDivShow = "";
$('a').hover(function(){
    isDivShow = "visible";
    setTimeout(function(){
    $('.show-hide').css("visibility", isDivShow)}, 1200);
}, 
function(){
  isDivShow = "hidden";
   $('.show-hide').css("visibility", isDivShow);
});

.show-hide{
  visibility : hidden;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><p> Hover here </p></a>


<p class="show-hide"> This should be shown when hovered </p>

<p class="show-hide"> This should be shown when hovered </p>