JQuery - 单击动画元素答案

【问题标题】：JQuery - Click animated elementJQuery - 单击动画元素
【发布时间】：2014-06-10 15:12:33
【问题描述】：

我正在尝试创建一些内容，您可以将鼠标悬停在您应该能够点击的框和“标签”滑出。

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

<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;
}

提前致谢。

【问题讨论】：

检查这个jsfiddle.net/gLsWw/2 现在它可以工作了，问题是你得到了所有的.slide
@BryanAzofeifa 我相信他也希望红色框恢复动画效果。看我的回答。

标签： javascript jquery animation hover

【解决方案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/

【讨论】：

【解决方案2】：

我相信我已经按照你的意愿工作了：http://jsfiddle.net/594Yk/

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

$(".box").mouseout(function() {
    $(this).find(".slide").animate({ width: "65px" }); 
});

【讨论】：

【解决方案3】：

一种解决方案是，您可以拥有一个容器元素，该元素同时包含框和滑动选项卡。

类似...

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

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

http://jsfiddle.net/pTU2d/

【讨论】：