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替换你的toggle函数。当您将鼠标悬停在框上时，我们将告诉.tool_hover类通过将其左侧位置设置回0来返回。只需将第一个.toggle（）替换为：

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

和第二个toggle（）：

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

以下是jsfiddle来演示

jQuery在悬停时从右侧滑动/弹跳div

1 个答案: