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

我相信我的工作方式如你所愿：http://jsfiddle.net/594Yk/

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

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

Answer 2

主要问题是.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/

Answer 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/

JQuery - 单击动画元素

3 个答案: