Question

尝试在鼠标悬停时使用jquery制作5个div（作为100％高度，20％宽度的列）可缩小和扩展。我得到了这个部分工作到一定程度，但最后一栏是错误的并且在回到原始位置之前创造了奇怪的白色间隙。看到附带的小提琴很难解释。我想让这个工作没有最后一栏吓到我。

<body>
<div class="columnContainer">
    <section class="mainColumn columnOne" class="">

    </section>
    <section class="mainColumn columnTwo" class="">

    </section>
    <section class="mainColumn columnThree" class="">

    </section>
    <section class="mainColumn columnFour" class="">

    </section>
    <section class="mainColumn columnFive" class="">

    </section>
</div>


<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jq-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/playgroundjs.js" type="text/javascript" charset="utf-8"></script>

.columnContainer{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
white-space: nowrap;
display: block;
left: 0;
top: 0;

}

$(".mainColumn").click(function(){
if ( $(this).hasClass("large") ){
     $(this).animate({width:"20%"},300), $(".mainColumn").animate({width:"20%"});
     $(this).removeClass("large");
}
else {
     $(this).animate({width:"40%"},300);
     $(this).removeClass("mainColumn"), $(".mainColumn").animate({width:"15%"},300);
     $(this).addClass("mainColumn");
     $(this).addClass("large");
}

}）;

http://jsfiddle.net/LxmRx/

Answer 1

这是一个仅限CSS的解决方案：http://jsfiddle.net/CWrU2/。为了清晰起见，我已经删除了你的代码。将display设置为table和table-cell可以处理因悬停期间动画而出现的空白区域。

使用CSS性能提高了约50％（尽管这是一个粗略估计）。

HTML：

<div class="columnContainer">
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

body, html, .columnContainer{
    height: 100%;
}

.columnContainer {
    display: table;
    width: 100%;
}

.columnContainer > section {
    width: 20%;
    display: table-cell;
    -webkit-transition: width 0.3s linear;
    transition: width 0.3s linear;
}

.columnContainer:hover > section:hover {
    width: 40%;
}

.columnContainer:hover > section {
    width: 15%;
}

.columnContainer > section:nth-of-type(1) {
    background-color: rgba(200,200,250, 0.5);
}
.columnContainer > section:nth-of-type(2) {
    background-color: rgba(200,250,200, 0.5);
}
.columnContainer > section:nth-of-type(3) {
    background-color: rgba(250,200,200, 0.5);
}
.columnContainer > section:nth-of-type(4) {
    background-color: rgba(200,225,225, 0.5);
}
.columnContainer > section:nth-of-type(5) {
    background-color: rgba(225,200,225, 0.5);
}

Answer 2

您可以使用js调整宽度：

$(".columnContainer").on("mouseenter", "section", function(e){
    $('.mainColumn').width('15%');
    $(e.target).width('40%')
});

$(".columnContainer").on("mouseleave", "section", function(e){
    $('.mainColumn').width('20%');
});

使用css作为动画：

.mainColumn {
    -webkit-transition: width .3s ease-in-out;
    -moz-transition: width .3s ease-in-out;
    -o-transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
}

这是一个小提琴：

http://jsfiddle.net/dubbs/6GPaA/

Answer 3

有时最好的答案是最简单的。根据您的需要，添加它可能会很好。

body {
    background-color: rgba(225,200,225, 1);
}

小提琴：http://jsfiddle.net/LxmRx/2/

Answer 4

这是一篇精彩的帖子，教会了我很多东西。我修改了上面的小提琴来创建可在悬停时显示文本的可扩展按钮。

    <div class="columnContainer">
        <section><div class="div1" style="width:50%; float:left">test</div><div class="div2" style="width:50%; float:left">test</div></section>
        <section><div class="div3" style="width:50%; float:left">test</div><div class="div4" style="width:50%; float:left">test</div></section>
</div>

.div2 {
    display: none;
}

.columnContainer:hover > section:nth-of-type(1):hover .div2 {
    display: block;
}

.div4 {
    display: none;
}

.columnContainer:hover > section:nth-of-type(2):hover .div4 {
    display: block;
}

https://jsfiddle.net/CWrU2/24/

我真的很感谢你们所有人，我希望我的补充对某人有用！

可扩展/可收缩的柱子，宽度为100％

4 个答案: