jQuery animate squishes content?
Simple question with a lot of nuance, since I am picking up jQuery as I go...
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="body">
<div id="flip_body">
<div id="top_body">
<div id="top_body_left">
<p id="text">This will be a really long string to t开发者_Python百科est if things get squished</p>
<div id="left_test" class="test">
</div>
<div id="right_test" class="test">
</div>
</div>
<div id="top_body_right">
</div>
</div>
<div id="bottom_body">
</div>
</div>
<div id="flip">
<p>Flip</p>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
<html>
CSS:
#container
{
width:1000px;
height:600px;
background-color:red;
}
#header
{
width:100%;
height:15%;
background-color:orange;
}
#body
{
width:100%;
height:70%;
background-color:yellow;
}
#top_body
{
width:100%;
height:100%;
background-color:red;
}
#bottom_body
{
width:100%;
height:100%;
background-color:pink;
display:none;
}
#flip_body
{
width:90%;
height:100%;
float:left;
position:relative;
}
#flip
{
width:10%;
height:100%;
float:left;
background-color:green;
}
#top_body_left
{
height:100%;
float:left;
background-color:teal;
position:absolute;
left:0px;
top:0px;
bottom: 0px;
width: 250px;
}
#top_body_right
{
height:100%;
float:left;
background-color:black;
position:absolute;
left:300px;
top:0px;
bottom: 0px;
width: 200px;
}
#text
{
overflow:hidden;
}
#left_test
{
background-color:orange;
}
#right_test
{
background-color:red;
width:150px;
}
.test
{
width:100px;
height:100px;
float:left;
}
#footer
{
width:100%;
height:15%;
background-color:blue;
}
jQuery:
$(document).ready(function(){
$("#flip").data("open", false);
$("#flip").click(function() {
// slide to the right
if ($(this).data("open") == false) {
$("#top_body_left").animate({width:'toggle'},500);
$("#top_body_right").animate({width: '+=100', duration:500});
$(this).data("open", true);
}
// slide to the left
else {
$("#top_body_left").animate({width:'toggle'},500);
$("#top_body_right").animate({width:'-=100'},500);
$(this).data("open", false);
}
});
});
How do I prevent the #top_body_left div from changing the arrangement of the children (#left_test and #right_test)? Is there a way to toggle without the floats moving or any content being wrapped? I read about using css clip, but I'm not sure that's what I need.
I think you need to encapsulate the contents in another container and add overflow:hidden to the inner container (that's for every block that you want to squish), then squish the outer one.
A fiddle to look at. http://jsfiddle.net/mrtsherman/4PG7w/
Floated left elements will fill their container left to right. If they do not fit then they will wrap to a new line. You could instead place them in a container with overflow: hidden. This prevents them from wrapping.
Example Fiddle - http://jsfiddle.net/mrtsherman/4PG7w/1/
加载中,请稍侯......
精彩评论