Question

我有一个简单的页面，在容器中包含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的性能却大幅下降。

任何帮助都将不胜感激。

Answer 1

我不确定Firefox的问题是什么，虽然我尝试过并且可以确认存在问题，但是有一种更好的，更少程序化的方式来实现您目前正在做的事情。

您可以将javascript大规模缩短为：

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

see fiddle

Answer 2

$(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;
}

动画宽度为3列，以便它们始终占据整个空间

2 个答案: