基於百分比的寬度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動畫

回答

相關問題