Text springt auf, wenn er ausgeblendet oder angezeigt wird

Question

Ich arbeite an einer einfachen Sidebar, die geöffnet wird, wenn der Benutzer auf die Schaltfläche klickt und wenn es geöffnet ist, möchte ich etwas Text neben den Symbolen anzeigen.

Wenn ich jedoch die Seitenleiste öffne und versuche, den Text fadeIn() oder der Text, springt es auf und erstellt einen unerwünschten Effekt der Erweiterung und Deflation der Sidebar, während die Sidebar selbst erweitert wird.

Gibt es eine Möglichkeit, diesen Text neben dem Symbol anstelle des Jumping-Effekts erscheinen zu lassen?

Ich nehme an, es ist wegen des Timings, aber ich bin mir nicht sicher, wie ich es lösen kann und ich würde lieber nicht setTimeout();

https://jsfiddle.net/dqf8byn9/

Answer 1

Sie könnten versuchen, den Text erst, nachdem die Seitenleiste erweitert zeigt. animate() kann eine Funktion ausführen, wenn sie als Argument abgeschlossen ist. Versuchen Sie, Ihren Code zu ändern, wie so:

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

400 und "swing" die Standardwerte für die Dauer und Lockerungen sind.

Answer 2

Hinzufügen white-space:nowrap; zum .sidebar a Wähler würde das Problem beheben. Es würde auch ermöglichen, dass Sie die Seitenleiste so breit oder schmal wie Sie möchten.

Dieser Codeausschnitt zeigt, wie der Code funktioniert.

$('.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>