我有以下内容:http://jsfiddle.net/4QF4C/14/ 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();
});
请帮忙!
我认为这符合您的要求:http://jsfiddle.net/4QF4C/32/ 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
,并越过黑线。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)