使用jQuery在水平方向上滑動DIV

Question

在用戶向下滾動（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);
    }
});

Answer 1

您需要從if條件中刪除setTimeout調用，然后將整個塊放入它自己的setTimeout 。 這意味着代碼只在滾動完成時運行一次，而不是每次滾動事件觸發時都會導致口吃。

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)
});

示例小提琴