jQueryのアニメーション機能で固定位置の画像をアニメーション化する方法はありますか?

css html jquery jquery-animate
jQueryのアニメーション機能で固定位置の画像をアニメーション化する方法はありますか?

Webページの横にソーシャルアイコンリンクがあり、CSSの `position:fixed`を使用した位置であるため、ページの残りの部分がスクロールされても移動しません。

アイコン画像の幅は90ピクセルで、マウスオーバーするまで15ピクセルしか表示されないように、ほとんど画面外に配置しました
– その後、それらの残りが表示されます。 私はCSSとを使用してこれを達成します
`.hover`属性ですが、この方法で「ポップ」するだけです。

スムーズにスライドさせたいのですが、これを行う最良の方法はjqueryの `animate`関数を使用することですが、どうすればよいかまったくわかりません。

以下は、画像をシフトするために現在使用しているCSSです。

.floater-side-fb {
    position:fixed;
    bottom: 600px;
    right:-70px;
}
.floater-side-fb a:hover{
    position:fixed;
    bottom: 600px;
    right: -5px;
}

そしてhtml …​

  1  0


ベストアンサー

http://api.jquery.com/animate/ [.animate()]のドキュメントをご覧ください。

$('.floater-side-fb').hover(function() {
    $(this).stop().animate({ 'right': '-5px' }, 'slow', 'linear');
}, function() {
    $(this).stop().animate({ 'right': '-70px' }, 'slow', 'linear');
});

NB. 最初にCSSの `:hover`クラスを削除する必要があります。

4


タイトルとURLをコピーしました