I have the following: http://jsfiddle.net/4QF4C/14/
Why does the red square hide behind the black line during the animation and then show after it's done? How can I fix this?
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();
});
Please help!
I think this does what you're after: http://jsfiddle.net/4QF4C/32/
Basically all I did was change the following:
.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
}
This makes the .box
expand to include the .dot
, and be over the black line.
The Blind
effect will give the container an overflow:hidden
, so height changes affect what's visible.
You can easily fix it by choosing another effect, such as linear or changing the direction
parameter to horizontal
or so ( 'Blind', {direction:'bottom'}
)
However, this will change the effect, so you could create your own function because the element's height change will effect what's visible.
尝试使用fadeIn而不是show
$('a').click(function() {
$(".box").slideDown();
$("a").hide();
});
This sounds to me the one you want, or fadeIn() like Justin said.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.