Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to fade out div when user is inactive or remove div complete to show another div

this should be easy but I just can’t get it to work as it should… I have a div element serving as a button. I do not want the button to be visible all the time, just to appear when the user touches the screen (with finger or mouse), stays visible for a period of time (say 2 seconds) after inactivity and then disappear.

I do not want it to disappear 2 seconds after it was made visible (for that I could just use jQuery delay), I want it to disappear 2 seconds after the user has stopped interacting with the screen (i.e. the #grid element in my case). As long as the user is touching the screen or moving the mouse the button is visible, when he stops that activity 2 seconds passes and the button goes away.

The following I have, it does not work:

var grid = $('#grid');
    grid.bind('mousemove touchmove tap swipeleft swipeup swipedown swiperight', function(e) { 
        var timer; 
        var circle= $('.circle-button');
        if (!circle.is(":visible")) {
            //button is not visible, fade in and tell it to fade out after 2s
            $('.circle-button').fadeIn('slow');
            timer = setTimeout(function(){ $('.circle-button').fadeOut('slow') }, 2000);
        }    
        else {
            //button is visible, need to increase timeout to 2s from now
            if (timer) clearTimeout(timer);
            timer = setTimeout(function(){ $('.circle-button').fadeOut('slow') }, 2000);
        }    
    });
Tags:

2

Answers


  1. 0

    You can use code below.It might help:

    var timer; 
var grid = $('#grid');
var circle= $('.circle-button');


function showButton() {
    circle.fadeIn('slow');
    resetInactivityTimer();
}

function resetInactivityTimer() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        circle.fadeOut('slow');
    }, 2000); // 2 seconds
}

grid.on('touchstart mousemove', showButton);
grid.on('touchend mouseout', resetInactivityTimer);
    #grid{
    width: 300px;
    height: 300px;
    background-color: gray;
}
.circle-button{
    display: none;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">

    <title>Document</title>
</head>
<body>
    <div id="grid">
        <button class="circle-button">my button</button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="main.js"></script>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Two issues:

    1. var timer is local to your event handler, which means that you will lose the identifier returned by setTimeout as soon as the execution of that event handler ends — which is immediate. You should make it a variable that has a longer lifetime.

    2. jQuery bind is deprecated (since 2016). Use on instead.

    Here is a correction, with sample HTML to see it work:

    var timer; // Moved out of the event handler

$('#grid').on('mousemove touchmove tap swipeleft swipeup swipedown swiperight', function(e) { 
    const $circle = $('.circle-button');
    if (!$circle.is(":visible")) {
        $circle.fadeIn('slow');
    }    
    clearTimeout(timer);
    timer = setTimeout(() => $circle.fadeOut('slow'), 2000);
});
    html, body { height: 100%; }
#grid { height: 100%; background: yellow; }
.circle-button {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div id="grid">
    Move mouse over this area to show the circular button.<br>
    Hold mouse still for 2 seconds to hide the button. <br>
    <button class="circle-button">Circle button</button><br>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search