悬停时从右侧滑入 jQuery 滑动/反弹 div

Question

jQuery 新手，但正在尝试解决这个问题。

我拥有的是内容框列表。当我们将鼠标悬停在每个盒子上时，一个带有详细信息的 div 会从右侧滑入（设计师也想要一个“反弹”效果），并在鼠标移出时隐藏。

我确实可以访问项目中的 jQueryUI。

这是我目前所拥有的：

每个盒子的 HTML

<div class="tool_master show">
    <div class="tool_hover"> Hover information here  </div>
    <div class="tool_box" > Content here    </div>
</div>

CSS

.tool_box {
    height:100px;
    width:460px;
    position:relative;
    }
.tool_hover {
    height:100px;
    width:460px;
    background:#525051;
    position:absolute;
    z-index:100;
    display:none;
}

我创建了一个 jquery 脚本来显示/隐藏哪个有效

$(".show").hover(function(){
        $(this).closest("div").find(".tool_hover").toggle();
    }, function(){
       $(this).closest("div").find(".tool_hover").toggle();
    });

这完成了工作，但没有提供设计师想要的“经验”。

它需要做的是从右侧快速滑入，并可能产生反弹效果。退出时，向右滑出。我不是很精通jquery动画。

有人可以帮帮我吗？

提前致谢！

Answer 1

你想要的是animate - 用动画替换你的切换，并为（属性、持续时间、缓动、回调函数）输入参数。

为了让它与您的代码一起使用，您需要更改/添加一些内容。首先，从您的 tool_hover 中删除 display:none - 相反，我们将通过将其放置在 .show 框之外来隐藏它，然后将 .show 的溢出设置为隐藏。

到你的 CSS：

.show {
     overflow:hidden; 
     position:relative; /* Otherwise the absolute positioned child element ignores overflow */
}
.tool_hover {
    z-index: 0; /* Take precedence over .tool_box */
    left: 500px; /* Starting position is outside .show , effectively hidden */
}
.tool_box {
    z-index: 1; /* So hover will cover this box */
}

接下来，我们想用 animate 替换您的切换功能。当您将鼠标悬停在该框上时，我们将通过将其左侧位置设置回 0 来告诉 .tool_hover 类返回。只需将第一个 .toggle() 替换为：

...
.animate({
    'left' : '0px'},
    'slow');

第二个 toggle() 使用：

...
.animate({
    'left' : '0px'},
    'slow');

这里有一个jsfiddle 来演示