Question

我正在为一个网站制作一个简单的滑动面板脚本，我有3个类别，每个类别都是一个面板，但我很难使用百分比作为宽度。

我为此创建了d jsfiddle：http://jsfiddle.net/estebanrao/FZ6ea/

HTML：

<div class="cat-selector">
    <a href="#" class="cat-s-notebooks">Notebooks</a>
    <a href="#" class="cat-s-desktops">Desktops</a>
    <a href="#" class="cat-s-smartphones">Smartphones</a>
</div>

CSS：

.cat-selector {
    font-size: 0;
    text-align: center;
}
.cat-selector > a {
    display: inline-block;
    height: 200px;
    width: 33%;
}
.cat-s-notebooks {
    background: red;
}
.cat-s-desktops {
    background: green;
}
.cat-s-smartphones {
    background: blue;
}

JS：

$('.cat-selector')
    .on('mouseenter', 'a', function () {
    $(this).animate({
        width: '39%',
    }, 300, 'swing')
    $(this).siblings('a').animate({
        width: '30%',
        opacity: 0.5
    }, 300, 'swing')
})
    .on('mouseleave', 'a', function () {
    $(this).stop().animate({
        width: '33%',
    }, 300, 'swing')
    $(this).siblings('a').stop().animate({
        width: '33%',
        opacity: 1
    }, 300, 'swing')
});

如果您看一下示例，您会注意到3个面板的总宽度始终为99％。问题是我希望这个大小始终与关闭数字匹配到100％。

我尝试使用小数（.33）但它只会变得更糟。我也尝试获取窗口的总宽度并从那里进行数学计算，但这也是尝试失败。

我有什么遗漏才能达到100％的百分比（或最接近的十进制数）？

提前致谢！

Answer 1

为了解决这个问题，我刚刚添加了一个容器div

<div class="cat-selector-container">

使用css属性

.cat-selector-container { overflow: hidden; white-space: nowrap; width: 100%; }

我真的不需要那个容器，我可以把这个css添加到我的.cat-selector div但是因为我有一些顶部填充我添加了这个额外的div以避免滚动条。

基于百分比的宽度jQuery动画

1 个答案: