我有以下内容: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();
});
请帮忙!
答案 0 :(得分: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
,并超出黑线。
答案 1 :(得分:0)
Blind
效果将为容器提供overflow:hidden
,因此高度变化会影响可见内容。
您可以通过选择其他效果轻松解决此问题,例如线性或将direction
参数更改为horizontal
左右('Blind', {direction:'bottom'}
)
然而,这会改变效果,因此您可以创建自己的函数,因为元素的高度变化会影响可见的内容。
<强> Here is a fiddle 强>
答案 2 :(得分:0)
尝试使用fadeIn而不是show
答案 3 :(得分:0)
$('a').click(function() {
$(".box").slideDown();
$("a").hide();
});
这听起来像你想要的那个,或者像Justin说的那样fadeIn()。