変更をブロックするためにインラインディスプレイを表示する

Question

ページをスクロールするときにサイズを変更するスティッキーヘッダーを作成しようとしています。 実装したい主な機能の1つは、ヘッダー内のイメージが縮小して左に移動することです。

これまでのところ、私はすべてがアニメーション化されてうまく機能しています。 私は左に動いていますが、動かないのです。

私は1つの点で

$('#page_header_logo_img').css({ 
    "padding-left":"20%", 
    "display":"inline" 
}) 

を呼び出していますし、後に場所を正確に私が欲しい、それを動かすために美しく働く

$('#page_header_logo_img').css({ 
    "padding-left":"0", 
    "display":"block" 
}) 

を呼び出して...唯一の問題は、それがジャンプしているjQueryので

。

私はjQuery Animate効果を取り入れようとしましたが、動作させることができませんでした。

Here is a JSFiddle of what I currently have 私が必要とするのは、左右の動きが滑らかで瞬時でないことです。 ANSWER

FOR

EDITは、私は私の最も近くなった答えを受け入れ、そしてまた、私は尋ねた質問に答えました。 しかし、それは私が欲しかったものを私に与えてくれなかったので、ここで最終的な解決策を投稿すると思いました。

画像をposition: absolute;に変更し、余白と左のプロパティを動的に設定しました。

You can see a working JSFiddle here

Answer 1

あなたがアニメーション効果をしたい場合は、代わりに.css()の.animate()を使用することができますが、displayが.animate()では動作しませんので、あなたはそれでdisplayを使用することができます。

残りは関数は、この

var scrolPos = $(window).scrollTop(); 
if(scrolPos>100){ 
    $('#page_header_logo_img').animate({ 
    paddingLeft:"20%" 
    }); 
} else { 
    $('#page_header_logo_img').animate({ 
    paddingLeft:"0" 
    }); 
}; 

Answer 2

あなたはCSSトランジションの使用を検討することができます。

transition: padding-left 0.3s ease-in-out;を#page_header_logo_imgのスタイルに追加すると、左に移動するとアニメーション化されます。

JSFiddleのhereを参照してください。これはあまり洗練されていませんが、どのようにCSSトランジションを使用できるかを確認できます。

CSSトランジションの詳細については、thisを参照してください。

Answer 3

のようにあなただけのCSSプロパティを変更していることになるので、ジャンプがあります。

円滑な移行のために、jQuery .animate()メソッドを使用してください。コードを以下のように変更します。

$('#page_header_logo_img').animate({ 
    "padding-left": "20%", 
    "display": "inline" 
}) 

と

$('#page_header_logo_img').animate({ 
    "padding-left": "0", 
    "display": "block" 
})