Die Hälfte eines HTML-Elements verschwindet, wenn es über die jQuery-Benutzeroberfläche ausgeblendet wird.'hide() '

Question

Ich habe ein HTML-Element, das beim Klicken mit der jQuery UI nach oben/unten/links/rechts blättert (abhängig von den Benutzereinstellungen) Funktion.

$('#abb-wrap').hide('slide', { 'direction': 'up' }, 200, function(){ 

    // I do stuff here, but it's not relevant (and not causing the problem) 

}); 

Diese Funktion funktioniert perfekt, aber die Hälfte des HTML-Elements verschwindet während der Animation. Ich verwende transform: translateX(50%);, um das Element genau dort zu positionieren, wo es hingehört, und vermutlich ist dies die Ursache des Problems.

Nach vielen Suchen und Testen von möglichen Lösungen, kann ich nicht herausfinden, wie Sie das Problem beheben können. Ist jemand schon einmal auf dieses Problem gestoßen, und wenn ja, wie lautet die Lösung? Hier

ist das HTML-Element in Frage (buchstäblich von allem, es ist sehr einfach) -

<div id="abb-wrap"> 
    <span class="button-text">Show Admin Bar</span> 
</div> 

Und hier ist das CSS verwendet, um das Element zu stylen, wie gerendert durch Firefox 44.0.2 (das Problem weiterhin besteht auch in IE9/10/11 und Chrome 43.0.2357.81) -

#abb-wrap { 
    background-color: #23282d !important; 
    background-repeat: repeat; 
    bottom:    auto; 
    color:    #9ea3a8 !important; 
    cursor:    pointer; 
    height:    32px; 
    left:    auto; 
    position:   fixed; 
    right:    50%; 
    top:    0; 
    transform:   translateX(50%); 
    z-index:   100000; 
} 

Answer 1

Da die Position der äußeren Umhüllung fixiert ist, ist es die relative Positionierung der anderen Elemente nicht beeinflussen wird. Eine Umgehungsmöglichkeit, die ich gemacht habe, bestand darin, die Breite des Wrappers auf 100% zu bringen und den Hintergrund auf den inneren Bereich anzuwenden. Sie können zusätzlichen Styling zu dieser Spanne hinzufügen:

#abb-wrap { 
    bottom:    auto; 
    color:    #9ea3a8 !important; 
    cursor:    pointer; 
    height:    32px; 
    position:   fixed; 
    top:    0; 
    z-index:   100000; 
    width:100%; 
    text-align:center; 
} 

.button-text{ 
    background-color: #23282d !important; 
    background-repeat: repeat; 
    margin:0 auto; 
} 

die JSFiddle Siehe: https://jsfiddle.net/xfnf49sa/1/

Bitte beachte, dass ich die Zeit der Wirkung erhöht, um es klarer zu zeigen. Beachten Sie auch, dass hier die text-align:center für die äußere Hülle benötigt wird.

Answer 2

Es sieht so aus, als ob Ihr Aufruf zum "Verbergen" die falsche Syntax verwendet.

jQuery: .hide()

.Hide (Dauer [, Lockerung] [komplett])

Und ist die Beschleunigungsfunktion mehr, wie die Animation bewegt und nicht so sehr die Richtung. Um die Schaltfläche nach oben zu verschieben, ist es möglicherweise besser, die .slideUp-Methode zu verwenden.

jQuery: .slideUp()

Dann könnten Sie tun ...

$('#abb-wrap').slideUp("slow", function() { ... }); 

Hier ist eine Geige mit einem Beispiel.

https://jsfiddle.net/wvh47s5L/