淡入淡出或顯示時文本跳起

我正在打開一個簡單的側欄，當用戶單擊切換按鈕並打開時，我會在圖標旁邊顯示一些文本。淡入淡出或顯示時文本跳起

然而，當我打開側邊欄，並嘗試fadeIn()或show()文本，它跳'起來，創建擴大然後放氣的側邊欄，而側邊欄本身正在擴大的不利影響。

有沒有辦法讓這個文本出現在圖標旁邊而不是跳躍效果？

我認爲這是因爲時機，但我不知道如何解決它，我寧可不使用setTimeout();

https://jsfiddle.net/dqf8byn9/

來源

2017-05-18 Mr.Smithyyy

你可以嘗試只顯示後的側邊欄擴展的文本。 animate()可以採取完整的運行時作爲自變量的函數。試着改變，像這樣的代碼：

$('.sidebar').animate({ width: '200px' }, 400, "swing", function(){ $('span').removeClass('hidden'); });

400和"swing"是持續時間和寬鬆的默認值。

來源

2017-05-18 20:08:43 Botimoo

雖然這是做這件事，我的版本允許JavaScript來仍停留幾乎相同（含有少量的改變，就像出發代碼並不完美），因爲它使用了1號線的CSS來解決該問題。 – Daniel

添加white-space:nowrap;到.sidebar a選擇將解決這個問題。它也可以讓你有側邊欄一樣寬，或者只要你喜歡窄。

這段代碼顯示代碼工作。

$('.sidebar-toggle').click(function() { 
 
    if ($(this).hasClass('active')) { 
 
    $(this).removeClass('active'); 
 
    $('.sidebar').stop().animate({ 
 
     width: '50px' 
 
    }); 
 
    $('span').stop().fadeOut(); 
 
    } else { 
 
    $(this).addClass('active'); 
 
    $('.sidebar').stop().animate({ 
 
     width: '200px' 
 
    }); 
 
    $('span').stop().fadeIn(); 
 
    } 
 
});

.sidebar { 
 
    width: 50px; 
 
    background: #ddd; 
 
} 
 

 
.sidebar a { 
 
    display: block; 
 
    white-space: nowrap; 
 
} 
 

 
span { 
 
    position: relative; 
 
    top: -1em; 
 
    left: 1em; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sidebar"> 
 
    <a class="sidebar-toggle"> 
 
    <img src="http://placehold.it/30x30" /> 
 
    <span class="hidden">Test</span> 
 
    </a> 
 
    <a> 
 
    <img src="http://placehold.it/30x30" /> 
 
    <span class="hidden">Test</span> 
 
    </a> 
 
    <a> 
 
    <img src="http://placehold.it/30x30" /> 
 
    <span class="hidden">Test</span> 
 
    </a> 
 
</div>

來源

2017-05-18 20:01:14 Daniel

我在小提琴中將其改爲75px，但如果您運行它幾次，您可以看到它仍然存在相同的問題。我仍然希望保持邊欄的纖細，儘管如此擴展，但這不是我的最佳解決方案。 –

@ Mr.Smithyyy我也有褪色的文字，使過渡會略有很好使代碼工作。我改變了背景顏色，使其更容易地看到發生了什麼 – Daniel

@ Mr.Smithyyy如果你看一下我的更新的代碼段，它的工作原理具有容器小到你用漂亮的淡入上的文字影響喜歡。只需添加白色空間：nowrap;到錨標籤完美地工作。 – Daniel

淡入淡出或顯示時文本跳起

回答

相關問題