صورة مخفية، ثم على حركة الماوس تتلاشى، تتلاشى وتلاشى مرة أخرى

https://stackoverflow.com/questions/2248044

20-09-2019
|

سؤال

أحاول الحصول على صورة لتتلاشى عندما لم يكن هناك عمل فأرة لمدة 3 ثوان، ثم يتلاشى عند نقل الماوس مرة أخرى.

وأود أن أقدر أيضا إذا كان بإمكان أي شخص أن يقول لي كيف يمكنني إخفاء الصورة حتى يتحرك الماوس. لذلك عندما يتم تحميل الصفحة، لا ترى الصورة حتى يتحرك الماوس.

هذا ما لدي حتى الآن...

<!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>

شكرا جزيلا لمساعدتكم!

المحلول

لقد قمت بتحديث إجابتي باستخدام صفحة كاملة في واحدة. نأمل أن يجعل هذا أشياء أكثر وضوحا. من الأفضل أن يكون جافا سكريبت في ملفها الخاص، لكن هذا سيحصل على الذهاب.

تأكد من أن هذا الخط:

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

يشير بشكل صحيح إلى ملف JQuery الخاص بك مع الموقع الصحيح والاسم.

أعلمني كيف سيسير الامر.

<!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>

نصائح أخرى

جرب هذا:

$(document).ready(function() {
    var timer;
    // hide initially
    $('#top').hide();

    $(document).mousemove(function() {
        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }
        $('#top').fadeIn();
        timer = setTimeout(function() {
            $('#top').fadeOut();
        }, 3000)
    });
});

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow