javascript - JQuery - 点击动画元素

Question

我正在尝试创建一些东西，您可以将鼠标悬停在框上，然后滑出应该能够单击的“选项卡”。

但是，我似乎无法弄清楚如何在将鼠标悬停在红色框上时使它保持扩展状态，以便我可以单击红色选项卡，当您将鼠标移开红色选项卡时动画会返回。

到目前为止，这是我得到的: http://jsfiddle.net/gLsWw/1/

<div class="box">
    <a class="slide"></a>
</div>

<div class="box">
    <a class="slide"></a>
</div>

$(".box").hover(function() {
    $(".slide").stop(true, false).animate({ width: "200px" });
}, function() {
    $(".slide").stop(true, false).animate({ width: "auto" });
}); 

.box {
    width: 65px;
    height: 65px;
    background-color: green;
    border: 1px blue solid;
}

.slide {
    position: absolute;
    width: 65px;
    height: 65px;
    background-color: red;
    z-index: -1;
}

提前致谢。

Answer 1

主要问题是 .slide 的 z-index 为负。您需要在没有负 z-index 的情况下进行设置才能使其正常工作。这是更新后的 CSS:

.box {
    width: 65px;
    height: 65px;
    background-color: green;
    border: 1px blue solid;
    position: relative;
}

.slide {
    position: absolute;
    width: 0;
    height: 65px;
    background-color: red;
    left: 66px;
}

除此之外，我假设您一次只希望一个红色元素滑出，而不是两个都滑出。这是更新后的 JS:

$(".box").hover(function() {
    $(this).find(".slide").stop().animate({ width: 200 });
}, function() {
    $(this).find(".slide").stop().animate({ width: 0 });
}); 

我在 JS 中更改了以下内容:

• 向动画添加了 .stop() 以取消任何现有动画。
• 将隐藏宽度更改为 0 以使其具有动画效果。
• 选择器现在包含在 .find 调用中以将其限制为当前元素。

更新的 JSFiddle:http://jsfiddle.net/gLsWw/28/

---

或者，您可以完全使用 CSS 来完成此操作:

.box {
    width: 65px;
    height: 65px;
    background-color: green;
    border: 1px blue solid;
    position: relative;
}

.slide {
    position: absolute;
    width: 0;
    height: 65px;
    background-color: red;
    left: 66px;
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
}

.box:hover .slide {
    width: 200px;
}

JSFiddle:http://jsfiddle.net/gLsWw/30/