2

私は jQuery を使用して、ページの下部にある「スライド」をフェードインしています。これは、右側に固定されるはずの小さなタブです。現在、遅れてフェードインしていますが、ユーザーが下にスクロールしたときにフェードインしたいと考えています。

ただし、これは div を横に動かさずに、ページ全体にスライドさせ続けます。

   $(function() {
        var slide = $("div[data-slide='true']");

        $(window).scroll(function() {
            var pos = $(document).scrollTop();
            console.log(pos);
            if ($(document).scrollTop() > 400) {
                 slide.animate({opacity: 1,right:'+=350'},1350, 'swing').stop();

           } else {
                 slide.clearQueue().animate({opacity: 0,right:'-=350'},500, 'easeOutBounce');
           }
        });

    });

最初のウェイポイントに到達したら、スライドを停止するにはどうすればよいですか? スクロールイベントのバインドを解除できるようです$(window).unbind('scroll');が、スライドがアニメーション化されません。

4

1 に答える 1

3

スクロール イベントが発生するたびに +350px まで新しいアニメーションを開始しているため、ページ上を移動しています。
それを防ぐためにちょっとしたテストをしました。基本的に、アニメーションが複数回開始されるのを防ぐために 2 つの変数 (オープニングとクロージング) を追加し、アニメーション自体を少し変更しました。

デモ:
http://jsfiddle.net/B7pJL/1/

JS:

var slide = $("div[data-slide='true']");
var opening = false;
var closing = false;
$(window).scroll(function() {
    var pos = $(window).scrollTop();
    console.log(pos);
    if (pos > 100) {
        if (!opening) {
            opening = true; closing = false;
            slide.stop().animate({
                opacity: 1,
                'margin-left': -350
            }, 1350, function() {
                opening = false;
            });
        }

    } else {
        if (!closing) {
            closing = true; opening = false;
            slide.stop().animate({
                opacity: 0,
                'margin-left': 0
            }, 500, function() {
                closing = false;
            });
        }
    }
});​
于 2012-06-06T22:04:33.893 に答える