ユーザーが特定のポイントを過ぎてスクロールするとフェードインして左からスライドインし、同じポイントを過ぎて上にスクロールした後に再びフェードインしてスライドアウトする「トップに戻る」リンクを作成しようとしています。
HTML:
<section id="banner"></section>
<nav id="fixed">
<ul>
<li id="top-link"><a href="#">Top</a></li>
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
<li><a href="#">Nav 4</a></li>
</ul>
</nav>
<section id="content"></section>
Javascript:
$(document).ready(function(){
$("#top-link").hide();
});
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() >= 300) {
$('#top-link').fadeIn();
} else {
$('#top-link').fadeOut();
}
});
});
300px を超えてスクロールすると、フェードインおよびフェードアウトすることができますが、この例http://jsfiddle.net/AFMxe/10/からわかるように、フェードインおよびフェードアウトすると、後続の li アイテム右に「ポップ」します。フェードと同時にスライドするようにスムーズにアニメーション化する方法はありますか?