我的目标是创建一个动画（css / jquery），使绿色框在红色（红色固定）上滑动（生长）。然后将其切换回：绿色缩小，红色再次出现。
使用（“ #green”）。css（“ wdith”）使红色按钮被推动，我想避免这种情况。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<style>
.green {
width:400px;
background-color:green;
display:inline-block;
height:320px;
}
.red{
width:200px;
background-color:red;
display:inline-block;
height:320px;
}
</style>
<div>
<div id="green" class="green">eezez</div>
<div id="red" class="red">eezez</div>
<script>
$(function() {
$("#action").click(function() {
// toggle so green grows and takes red place (red does not move)
// toggle so green shrinks and so red takes his initial place again
});
});
</script>
</div>
</body>
</html>
这是小提琴：
我会改用浮点数。尝试这个：
.green {
width:400px;
background-color:green;
height:320px;
float:left;
}
.red {
background-color:red;
height:320px;
}
#container {
width:600px;
overflow:hidden;
}
<div id="container">
<div id="green" class="green">eezez</div>
<div id="red" class="red">eezez</div>
</div>
<button id="action">Toggle Green !</button>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句