Blind在动画期间隐藏div

我有以下内容： http ： //jsfiddle.net/4QF4C/14/

为什么红色方块在动画期间隐藏在黑线后面，然后在完成后显示？ 我怎样才能解决这个问题？

HTML：

 
 
 This is a static box that isn't effected by JQuery. 
 
 
 This is just some text. 
 
 Click Me! 
  

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(); }); 

请帮忙！

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 ，并且在黑线上。

Answer 2

尝试使用fadeIn而不是show

Answer 3

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

这听起来像你想要的那个，或像贾斯汀说的那样fadeIn（）。

Answer 4

Blind效果将使容器overflow:hidden ，因此高度变化会影响可见的内容。

大。 那么我该如何解决呢？

您可以通过选择其他效果轻松修复它，例如线性或将direction参数更改为horizontal或左右（ 'Blind', {direction:'bottom'} ）

但是，这会改变效果，因此您可以创建自己的函数，因为元素的高度变化会影响可见的效果。

这是一个小提琴