jQuery UI '.hide（）'で非表示にするとHTML要素の半分が消えます

Question

jQuery UI .hide()を使用して、クリックすると上下にスライドします（ユーザー設定に応じて）。関数。

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

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

}); 

この機能は完全に機能しますが、アニメーション中にHTML要素の半分が消えます。私はtransform: translateX(50%);を使用して要素を正確に配置する必要がある場所に配置し、おそらくこれが問題の根本原因です。

しかし、可能な解決策をたくさん探してテストしたところ、問題の解決方法を理解できません。前に誰かがこの問題に遭遇していますか？その場合、解決策は何ですか？ここで

は、問題のHTML要素は、（文字通りすべてのそれの、それは非常に簡単です）である - Firefoxの44.0.2によってレンダリングとして

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

そしてここでは、要素のスタイルに使用されるCSSである（問題また）IE9/10/11およびクロム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

外側包装紙の位置が固定されているので、それは他の要素の相対的位置に影響を与えないであろう。それで、私がした回避策は、ラッパーの幅を100％にして内側のスパンに背景を適用することでした。あなたはこのスパンに追加のスタイリングを追加することができます。私はそれがより明確に示すために、効果時間を増加https://jsfiddle.net/xfnf49sa/1/

注：

#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; 
} 

はJSFiddleを参照してください。また、ここでは外側のラッパーにはtext-align:centerが必要です。

Answer 2

"hide"の呼び出しが間違った構文を使用しているようです。

jQuery: .hide()

.hide（期間[、イージング] [完全な]）

また、イージング関数がどのようにアニメーションが移動しないので、多くの方向の複数です。ボタンをスライドさせるには、.slideUpメソッドを使用するほうが良いでしょう。

jQuery: .slideUp()

次に、あなたができる...ここ

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

は一例とフィドルです。

https://jsfiddle.net/wvh47s5L/