在100%宽度容器内设置div动画
在100%宽度容器内设置div动画
提问于 2016-09-14 04:05:23
我被这个问题卡住了。我有5列相邻浮动的div。当悬停在div上时，被悬停的div应该通过动画扩展其宽度。到目前为止，我已经介绍了这一部分，但我的问题是，当我悬停div时，最后一个div出现在底部(意味着它超过了100%宽度的容器)，我不确定如何在不防止超过100%容器的情况下解决这个问题。
以下是我到目前为止所做的工作：
$(document).ready(function() {
var boxWidth = $(".box").width();
$(".box").mouseenter(function() {
$(this).animate({
width: "30%"
});
}).mouseleave(function() {
$(this).animate({
width: boxWidth
});
});
});body {
margin: 0;
padding: 0;
}
.box {
height: 100vh;
width: 20%;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" style="background:red"></div>
<div class="box" style="background:grey"></div>
<div class="box" style="background:yellow"></div>
<div class="box" style="background:green"></div>
<div class="box" style="background:#000000"></div>
回答 2
Stack Overflow用户
发布于 2016-09-14 04:16:08
如果你喜欢flex，那么就这样做：
body {
margin:0;
padding:0;
}
.boxes {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
}
.box {
height: 100vh;
flex: 1 1 auto;
transition: flex-grow .3s ease-in-out;
}
.box:hover {
flex-grow: 1.5;
}<div class="boxes">
<div class="box" style="background:red"></div>
<div class="box" style="background:grey"></div>
<div class="box" style="background:yellow"></div>
<div class="box" style="background:green"></div>
<div class="box" style="background:#000000"></div>
</div>
flex here的一个很好的指南。
在JSFiddle上有相同的代码。
Stack Overflow用户
发布于 2016-09-14 06:10:30
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrap {
background:black;
overflow:hidden;
}
.wrap .box {
height: 100vh;
width: 20%;
float: left;
transition:width .25s ease;
}
.wrap:hover .box:hover {
width: 30%;
}
.wrap:hover .box {
width: 17.5%;
}<div class="wrap">
<div class="box" style="background:red"></div>
<div class="box" style="background:grey"></div>
<div class="box" style="background:yellow"></div>
<div class="box" style="background:green"></div>
<div class="box" style="background:#000000"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39478175
复制相关文章
相似问题
腾讯云开发者
