如何使用mousemove显示div,然后在2秒后自动隐藏它们

时间:2012-10-11 02:05:58

标签: jquery

我已经看过网络,但仍然可以做到这一点。 我正在使用的jquery代码是:

$(document).ready(function(){
// Slide top and bottom bars away in all screens except the lobby
    $("#main_content").ajaxStop(function(){

        if($("#content_text").length){
            }
        else{
            $("#top").slideUp(2000);
            $("#btm").slideUp(2000);
            }
    });


// Slide bars back in when the mouse is moved and then away again after 2 seconds

    var fadeout = null;
    $("html").mousemove(function() {

          $("#top").slideDown(2000);
          $("#btm").slideDown(2000);
          if (fadeout != null) {
            clearTimeout(fadeout);
          }
          fadeout = setTimeout(3000, hide_playerlist);
          alert("call back fired");
        });

    function hide_playlist() {
          $("#top").slideUp(2000);
          $("#btm").slideUp(2000);
        }

});

问题是缪斯移动过于敏感,并且在每次像素移动后都会发射。有没有办法做到这一点?

1 个答案:

答案 0 :(得分:0)

抱歉,我解决了这个问题。这不是鼠标移动灵敏度,而是在chrome和Chrome浏览器上使用directX的操作系统级错误(Firefox和歌剧很好)。这个bug只在Windows机器上运行,并没有在mac和linux上发生。无论如何,我更新了我的代码以捕获当前位置,只有在位置发生变化时才能工作

if($("#mediaPlayerWrapper").length){// Slide top and bottom bars when video wrapper is displayed


            $("#top").slideUp(2000); //slide up(hide) DIV's
            $("#btm").slideUp(2000); 

                var timer;      
                $('html').mousemove(function(e) {//slide(show) DIV's down on mouse move
                    if(window.lastX !== e.clientX || window.lastY !== e.clientY){   //Check to see if mouse has movedbefore running code(Temporary solution mousemove envent firing problem on IE and Chrome)

                        $('#top').slideDown(2000);
                        $('#btm').slideDown(2000);
                        clearTimeout(timer);
                        timer = setTimeout(onmousestop, 5000);//call onmousestop after 5 seconds
                        }

                        window.lastX = e.clientX
                        window.lastY = e.clientY

                    });

                var onmousestop = function() {//slide up(hide) DIV's again
                    $('#top').slideUp(2000);
                    $('#btm').slideUp(2000);
            };