第一次元素動畫時遇到淡入淡出

我有一些自定義按鈕控制何時淡入元素（在Jquery中完成）。在大多數情況下，功能是我所期望的。唯一的問題是，當我第一次按下任何按鈕時，動畫會有延遲（有時似乎完全忽略它）。我懷疑這與初始加載內容和隨後的初始加載後的緩存有關。第一次元素動畫時遇到淡入淡出

這裏的代碼片段：

$('.content').hide(); 
$('.button').click(function() { 
    if ($(this).hasClass('active')){ 
     if (!state.isExpanded){ 
      $('.button').animate({height: '5vw', width: '5%'}, 500); 
      $('#button-container').animate({height: '100%', width: '100%'}, 500); 
      showSection($(this), 1000); 
... 
...

showSection：

function showSection(elem, duration) { 
    var elemID = $(elem).attr('id'); 
    console.log(elemID); 
    switch(elemID){ 
     case 'person-icon': 
     $(aboutMeSection.ID).find('.content').fadeIn(duration); 
     break; 
    ... 
    ...

值得一提的是，我試圖加載在Illustrator中最大的單個對象是2.2創建多個自定義SVG圖像MB。這是我第一次創建網站，因此對於媒體元素的合理大小並不明顯。可能這個太大了？

來源

2016-04-14 GHOST-34

更換成更小的圖像進行測試。 2.2 MB的確太大了，特別是一個矢量文件。 – Duopixel

確實是這個問題。 SVG圖像過於複雜，無法優化，所以我只是創建了一個PNG版本（不知道爲什麼我堅持要將其作爲SVG）。感謝您的確認。 –

原來我用的SVG圖片太大了。就這樣，這個問題對任何有類似問題的人來說都不是完全浪費。

請考慮您使用的圖片是否需要SVG。作爲一個noobie，我陷入了它最近的流行，並且保存了我創建的一個SVG作爲SVG時的圖像，這時PNG會很好。
SVG的優化一篇好文章我讀想通之前應進行哪些操作：

Optimizing SVGs for Web Use

來源

2016-04-14 23:31:08

第一次元素動畫時遇到淡入淡出

回答

相關問題