Bild versteckt, dann auf Mausbewegung Fade-In, Fade-Out und Fade-In wieder

StackOverflow https://stackoverflow.com/questions/2248044

Frage

Ich versuche, ein Bild raus zu verblassen, wenn es keine Mausaktion für 3 Sekunden war und dann schwindet in, wenn die Maus wieder bewegt wird.

Ich wäre auch dankbar, wenn jemand könnte mir sagen, wie ich das Bild, bis die Maus bewegt versteckt werden machen kann. Also, wenn die Seite geladen wird bis Sie nicht sehen, das Bild, bis die Maus bewegt.

Das ist, was ich habe, so weit ... 

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

Vielen Dank für Ihre Hilfe!

War es hilfreich?

Lösung

Ich habe aktualisiert meine Antwort mit einer All-in-one-Seite. Hoffentlich wird dies die Dinge klarer. Besser haben Javascript in einer eigenen Datei, aber das wird erhalten Sie gehen.

Stellen Sie sicher, dass diese Zeile: 

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

richtig Punkte auf Ihre jQuery-Datei mit der rechten Position und den Namen.

Lassen Sie mich wissen, wie es geht. 

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

Andere Tipps

Versuchen Sie diese: 

$(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)
    });
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top