Question

当鼠标靠近底部时，我正试图获得一个滑块动画，当鼠标离开此面板时，面板会隐藏。

现在这是我的代码，它有效;但我认为有一个聪明的解决方案。

function mouseWindow(){
    $(document).mousemove(function(e){
        $('#status').html(e.pageX +', '+ e.pageY);
        var _this = this;
        if((windowHeight - e.pageY) < 50){
          $(_this).unbind('mousemove');
          $('.footer-gallery').stop(true, true).animate({ bottom : 0}, 500).mouseleave(function(){
              $(this).animate({ bottom : -180 }, 500, function(){
                  mouseWindow();
              });
          });
        }
    }); //mousemove
    }
    mouseWindow();

这是我的代码直播...谢谢！ http://markup.royalworkshop.com/realplaza/markup-inner.html

Answer 1

尝试这样的事情。基本上，您创建一个元素并将其用作触发器。我认为这更清晰，允许您使用CSS

控制触发元素

http://jsfiddle.net/MADA6/

<强> HTML

<div id="trigger">Trigger</div>
<div id="footer">Content</div>

<强> CSS

div#trigger {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    border: 1px solid black;
    z-index: 2;
}
div#footer {
    position: fixed;
    bottom: 0;
    display: none;
    width: 100%;
    height: 100px;
    background: blue;
    z-index: 1;
}

<强> jquery的

$('#trigger').mouseenter(function() {
    console.log('trigger');
    $('#footer').fadeIn();
});

$('#footer').mouseleave(function() {
    console.log('leave');
    $(this).fadeOut();
});

Answer 2

简单：

将一个（或多个）透明对象放在您想要的位置（提示：CSS）并为它们检测mouseover个事件。通过这种方式，您甚至可以使它们可用于调试，让它们根据布局动态更改大小等等。

如何根据鼠标位置触发事件

2 个答案: