向下滑动动画在动画期间隐藏 div [关闭]

Question

我有以下代码：http://jsfiddle.net/4QF4C/7/

当你按Click Me!时，为什么在动画过程中隐藏红色方块，然后在动画结束后显示？

HTML：

<div class="container">  
    <div class="static-box">
        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>

CSS：

.container {
    border-left: 5px solid black;
    position: relative;
    padding: 10px;
    height: 250px;
    width: 550px;
}

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

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

.dot {
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: red;
    top: 50%;
    left: -21px;
    margin-top: -7px;
}

jQuery:

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

Answer 1

因为在滑动动画时，父 div (div.box) 已将溢出设置为隐藏。这是 jQuery 在动画时的内部 css 的一部分。您需要定位父 div 以将 div.dot 包含在其可见区域中，或者将其覆盖为

overflow:visible !important

将此添加到您的 CSS 将解决您的问题：

div.box{
 overflow:visible !important;   
}

但是，这与滑动效果的工作方式相混淆。你最好增加滑动元素的宽度，否则它的内容会在滑动时可见，这基本上破坏了滑动效果。

干杯