Home/ Questions/Q 598697
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T16:25:01+00:00

I am trying to get an image to fade out when there has been

  • 0

I am trying to get an image to fade out when there has been no mouse action for 3 seconds and then fades in when the mouse is again moved.

I would also be appreciative if anyone could tell me how I can make the image be hidden until the mouse moves. So when the page loads up you don’t see the image until the mouse moves.

This is what I have so far…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <html>
        <head>
        <title></title>
        <script type="text/javascript">
            var timer;
            $(document).mousemove(function() {
            if (timer) {
            clearTimeout(timer);
            timer = 0;
            }
            $('#top:visible').fadeIn();
            timer = setTimeout(function() {
            $('#top').fadeOut()
            }, 3000)
            })
        </script>
        </head>
        <body>
            <div id="top">
                <img src="graphics/logo/logo.psd" title="" alt="">
            </div>
        </body>
    </html>

Thanks so much for your help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve updated my answer with an all-in-one page. Hopefully this will make things more clear. Better to have javascript in its own file, but this will get you going.

    Make sure that this line:

    <script type="text/javascript" src="jquery-1.4.1.min.js"></script>

    correctly points to your jQuery file with the right location and name.

    Let me know how it goes.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>tester page</title>  

<style> 
    <!--

    -->
 </style>

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>

<script type="text/javascript"> 

    $(document).ready(function() {
    var $top = $('#top');
    var $document = $(document);
    var timer = null;
    var timerIsRunning = false;

    $top.hide();

    $('#menu').mousemove(function(e){
        e.stopPropagation();
    });
    setTimeout(function() {
                        $document.mousemove(function(e) {
                                if($top.is(':hidden')) {
                                    $top.fadeIn();
                                } else {
                                    if(!timerIsRunning) {
                                        timerIsRunning = true;
                                        clearTimeout(timer);
                                        timer = setTimeout(function() { $top.fadeOut();  }, 5000);
                                        setTimeout(function() {timerIsRunning = false;}, 2000);
                                    }
                                }
                        });
                }, 500);

});

</script>
</head>
<body>
<div id="top">
   <img src="graphics/logo/logo.psd" title="" alt="">
</div>
</body>
</html>
    • 0