动画期间，Blind 隐藏 div

Question

我有以下内容：http://jsfiddle.net/4QF4C/14/。为什么红色正方形在动画期间会隐藏在黑线后面，结束后才显示出来？我该如何修复此问题？HTML：

<div class="container">
    <div class="content">  
        <div class="box-static">
            This is a static box that isn't effected by JQuery.
            <div class="dot"></div>
        </div>
        <div class="box">
            This is just some text.
            <div class="dot"></div>
        </div>
        <a href="#">Click Me!</a>
    </div>
</div>

CSS:

.container {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.content {
    width: 550px;
    float: right;
    border-left: 5px solid black;
    position: relative;
    height: 250px;
}

.box-static {
    width: 500px;
    position: relative;
    padding: 12px; 
    margin: 10px 0 0 17px;
    background-color: lightgrey;
    border: 1px solid black;
}

.dot {
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: red;
    top: 50%;
    left: -28px;
    margin-top: -8px;
}

.dot:after {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: white;
    top: 4px;
    left: 4px;
}

.box {
    width: 500px;
    position: relative;
    padding: 12px; 
    margin: 10px 0 0 17px;
    background-color: lightgrey;
    border: 1px solid black;
    display: none;
}

JQuery:

$('a').click(function() {
    $(".box").hide().show("blind");
    $("a").hide();
});

Please help!

- Bagwell

---

@ManofSnow 是的，非常简要地说。在.show('blind')方法期间，左侧在动画完成之前都在线条后面。即使将动画类型更改为.show('fade')，盒子的中间部分也会在完成之前隐藏在线条后面。 - cssyphus

Answer 1

我认为这个可以满足你的需求：http://jsfiddle.net/4QF4C/32/ 基本上我只是改变了以下内容：

.box {
    left: -11px; // Added
    margin: 10px 0 0 28px; // Changed the margin-left portion to add 11px
    overflow: visible; // Added this; not sure if it's necessary
}

这将使.box扩展以包含.dot，并覆盖黑线。

- Heretic Monkey

Answer 2

$('a').click(function() {
    $(".box").slideDown();
    $("a").hide();
});

这听起来像是你想要的，或者像Justin所说的那样使用fadeIn()。

- Atlas

Answer 3

Blind效果会给容器一个overflow:hidden，所以高度的变化会影响到可见内容。

太好了。那我该怎么解决呢？

你可以通过选择另一个效果，比如linear或者将direction参数改为horizontal或其他方式（'Blind', {direction:'bottom'}）来轻松解决它。

然而，这样会改变效果，因此你可以创建自己的函数，因为元素的高度变化会影响可见内容。

这里有一个fiddle

- Cilan

Answer 4

尝试使用fadeIn而不是show

- Justin Harris

---

这不是我想要的效果。 - Bagwell