Question

当您按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;   
}

然而，这与滑动效果如何起作用有关。你最好增加滑动元素的宽度，否则它的内容会在滑动时显现，这基本上会破坏滑动效果。

干杯

Slidedown动画在动画期间隐藏div

1 个答案: