jquery - 如何使用 hoverintent 显示面板

Question

嗨，这是非常基本的 jQuery 内容，但我有点迷路了。所以我有一个 310px 的图像，大部分隐藏在页面中，例如:

.bottom-panel {
    position: fixed;
    width: 874px;
    height: 310px;
    display: block;
    bottom: -300px;
    left: 150px;
    background: url(theimg.png) transparent no-repeat;
}

只有 10px 高的小标签在底部突出。我正在尝试使用 hoverIntent 插件创建交互性，将鼠标悬停在小选项卡上会导致 CSS 更改为

bottom: 0px;

只要鼠标位于 .bottom-panel 内的任何位置，页面上就会保持“展开”状态

有人可以给我一些片段或一些指导来帮助我实现这一目标吗？

Answer 1

首先，您可以确保 jQuery 的标准悬停适合您:

$('.bottom-panel').hover(function() {
  $(this).animate({bottom: 0}, 'fast');
}, function() {
  $(this).animate({bottom: -300}, 'fast');
});

一旦你按照你想要的方式工作，你需要做的就是用'hoverIntent'替换'hover'这个词，你应该很高兴去。