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

示例小提琴