仅在必要时使用jquery隐藏和显示文本

Question

I have a link and some text. Whenever I hover over the link the text should be displayed with a time interval of 1200 secs and should be hidden immediately when I remove the cursor from the link. So, according to what I have written, whenever I hover over the link the text is getting displayed after 1200 secs and after the text got displayed when I remove the cursor from the link the text is getting hidden which is fine. but whenever I keep the cursor on the link and remove the cursor from the link before the text is getting displayed, the text is still being shown, which I don't want to be shown. The text should be hidden immediately when I remove the cursor from the link.

Is there any way to do that. I have provided the code that I have written below: Please take a look at it, 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> 

Answer 1

It is happening because the show() function executes when you hover over it and even when you leave the mouse before 1.2 seconds, you are not preventing it, it will show the text once the delay is completed.

You need to execute hide() when mouseleave . that way it will stop the show() function. Try the snippet 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> 

Answer 2

You can just use normal 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> 

Answer 3

Can you check this. I just taken one flag for keeping visibility.

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>