动画3列的宽度，使他们总是占据整个空间

Animate width of 3 columns so that they always occupy entire space

本文关键字：空间 他们 3列 动画      更新时间：2023-09-26

我有一个简单的页面，在一个容器中包含3个div:

<body>
    <div id="mainContainer">
        <div id="mainColumn1" class="bgColumn"></div>
        <div id="mainColumn2" class="bgColumn"></div>
        <div id="mainColumn3" class="bgColumn"></div>
    </div>
</body>

它们应该是占据整个页面的3列。当你悬停其中一个时，它会扩展到50%，而其他的会缩小到25%。

很难解释问题在哪里，所以这里是jFiddle:

http://jsfiddle.net/FWcC5/2/

如果您快速移动光标，您会注意到右侧出现空白。它发生在Firefox中。奇怪的是，在Chrome中，它的行为完全是它应该的。

我尝试使用相同的东西与flex-grid，这工作，但性能急剧下降在Chrome。

我不确定Firefox的问题是什么，虽然我试过了，可以确认有一个问题，但是有一个更好的，更少程序化的方法来实现你目前正在做的事情。

你可以把你的javascript大量缩短为:

$(document).ready(function () {
    $('.bgColumn').hover(function(){
        $('.bgColumn').width("25%").not($(this));
        $(this).width("50%");
    });
});

看到小提琴

$(document).ready(function () {
    $('.bgColumn').hover(function(){
        $(this).width('50%');
        $('.bgColumn').not(this).width('25%');
    },
    function(){
        $('.bgColumn').width('33.3%');
    });
});
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
}
div {
    position: relative;
    background-position: center;
}
#mainContainer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space:nowrap;
}
.bgColumn {
    position: relative;
    background-repeat: no-repeat;
    transition: all 0.1s linear;
    height: 100%;
    width: 33.333%;
    display: inline-block;
}
#mainColumn1 {
    background-color: gray;
    float:left;
}
#mainColumn2 {
    background-color: white;
    float:left;
}
#mainColumn3 {
    background-color: black;
    float:right;
}
相关文章：