Slidedown анимация скрывает 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

Потому что когда slidedown одушевляет, родительский DIV (div.box) имеет переполнение набор для скрытой. Это часть внутреннего css jQuery во время анимации. Вам нужно либо поместить родительский DIV, чтобы охватить div.dot в его видимой области, или переопределить для

overflow:visible !important 

Добавление этого на ваш CSS будет решить вашу проблему:

div.box{ 
overflow:visible !important; 
} 

Однако это как работает эффект скольжения. Вы намного лучше увеличиваете ширину скользящего элемента, иначе его содержимое будет видимым, пока оно скользит, что в основном разрушает эффект скольжения.

Cheers