1

ユーザーが（x）ピクセル下にスクロールした後、DIVをビューポートに水平方向にスライドさせています。その後、上にスクロールすると、再びスクロールアウトします。ただし、スライドの方法は非常にぎくしゃくしているようです（一時停止します）。

<div id="doom_o"></div>

div#doom_o {
    position: fixed;
    left: -300px;
    z-index: -1;
    height: 400px;
    width: 309px;
    background-image: url("../images/doom_o.png");
    background-repeat: no-repeat;
}

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        setTimeout(function() {
            $('#doom_o').stop().animate({left: "20%"});
        }, 250);
    } 
    else {
        setTimeout(function() {
            $('#doom_o').stop().animate({left: "-300px"});
        }, 250);
    }
});
4

1 に答える 1

3

setTimeout条件から呼び出しを削除してから、ifブロック全体を独自のに配置する必要がありますsetTimeout。これは、スクロールイベントが発生するたびにコードが実行されるのではなく、スクロールが終了するときにコードが1回だけ実行されることを意味します。これが、スタッターの原因になります。

var timer;
$(window).scroll(function() {
    clearTimeout(timer);
    var timer = setTimeout(function() {
        if ($(this).scrollTop() > 100) {
            $('#doom_o').stop().animate({ left: "20%" });
        } 
        else {
            $('#doom_o').stop().animate({ left: "-300px" });
        }
    }, 150)
});

フィドルの例

于 2012-11-28T12:59:52.930 に答える