이미지 숨겨진, 그런 다음 마우스 움직임에 페이드 인, 페이드 아웃 및 페이드 인이 다시 나타납니다.

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

문제

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>

도와 주셔서 감사합니다!

도움이 되었습니까?

해결책

올인원 페이지로 답변을 업데이트했습니다. 바라건대 이것은 상황이 더 명확해질 것입니다. 자체 파일에 JavaScript를 사용하는 것이 좋습니다. 그러나 이것은 당신이 갈 것입니다.

이 라인을 확인하십시오 :

<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
scroll top