1

ユーザーが特定のポイントを過ぎてスクロールするとフェードインして左からスライドインし、同じポイントを過ぎて上にスクロールした後に再びフェードインしてスライドアウトする「トップに戻る」リンクを作成しようとしています。

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 アイテム右に「ポップ」します。フェードと同時にスライドするようにスムーズにアニメーション化する方法はありますか?

4

2 に答える 2

2

http://jsfiddle.net/AFMxe/11/はどうですか？私がしたことはすべて、数行の CSS を追加することだけでした。

#top-link {
position: absolute;
margin-left: 50px;
}

編集：

新しいバージョンはこちら: http://jsfiddle.net/AFMxe/13/

他のリスト項目のそれぞれにクラス「no-top-link」を追加し（もちろんもっとうまくできるかもしれません）、jQueryのフェージング関数を次のように変更しました：

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() >= 300) {
            $('#top-link').fadeIn();
            $('.no-top-link').animate({ marginRight: "12px" }, 1000 )
            // 1000 describes the time (in ms) the animation takes, change it as desired
        } else {
            $('#top-link').fadeOut();
        }
    });
});

EDIT 2： 次の機能が適切である必要があります

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() >= 300) {
            $('#top-link').fadeIn();
            $('.no-top-link').animate({'marginRight': '12px'},{duration: 1000, queue: false});
        } else {
            $('#top-link').fadeOut();
            $('.no-top-link').animate({'marginRight': '20px'},{duration: 1000, queue: false});
        }


    });

問題の解決策: 「キュー」を追加するのを忘れていました。

説明：

queue (デフォルト: true) タイプ: Boolean または String アニメーションをエフェクト キューに配置するかどうかを示すブール値。false の場合、アニメーションはすぐに開始されます。jQuery 1.7 以降、queue オプションは文字列も受け入れることができます。この場合、アニメーションはその文字列によって表されるキューに追加されます。カスタム キュー名を使用すると、アニメーションは自動的に開始されません。.dequeue("queuename") を呼び出して開始する必要があります。(出典: http://api.jquery.com/animate/ )

完成したjsFiddle

于 2013-07-09T23:03:45.300 に答える
0

代わりにメソッドを使用してみてくださいanimate..

//FADE IN BACK TO TOP LINK

$(document).ready(function(){
    $("#top-link").css('opacity', '0');
});

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() >= 300) {
            $('#top-link').animate({
                opacity : 1  
            },400);
        } else {
            $('#top-link').animate({
                opacity : 0  
            },400);
        }
    });
});

フィドルをチェック

それ以外の場合は、常にvisibilityプロパティの代わりにプロパティをdisplay使用できます

于 2013-07-09T23:02:50.700 に答える