基于百分比的宽度jQuery动画

我正在为一个网站设计一个简单的滑动面板脚本，我有3个类别，每个都是一个面板，但我很难用百分比来表示宽度。基于百分比的宽度jQuery动画

我已经为此创建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％的百分比（或十进制最接近）？

在此先感谢！

来源

2013-10-30 Tebo

我不知道如何在没有搞乱的情况下如何达到100％，但'33.2％'似乎至少可以在Chrome上运行。它可以针对不同的浏览器工作不同，但是..是否有原因％'不够好？我很好奇，看看是否有人知道它为什么会搞砸，虽然..我有一种感觉，因为浏览器处理边界等方式。 – Trevor

不知道这是否适合你，但你可以通过包装在一个作弊设置为100％且隐藏溢出的父级。那么你可以在没有滚动条问题的情况下为你的元素轻微超过100％总数 – charlietfl

谢谢！我结束了100％宽度，隐藏溢出和nowrap空白（因为项目是带内联块显示）的div内的百分比，所以他们不会崩溃 – Tebo

为了解决这个问题我只是增加了一个div容器

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

的CSS属性

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

我并不真的需要这个容器，我可以只添加这个CSS我对.cat-selector div，但由于我有一些顶部填充，我添加了这个额外的div，以避免滚动条。

来源

2013-10-30 13:35:35 Tebo

基于百分比的宽度jQuery动画

回答

相关问题