用jQuery水平滑动DIV

我在用户向下滚动（x）像素后水平滑动DIV到视口中。如果他们再次滚动，它会再次滚动。然而，它滑动的方式似乎非常不稳定（它也暂时停顿）。用jQuery水平滑动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); 
    } 
});

来源

2012-11-28 Barney

为什么downvotes？ –

@RoryMcCrossan：我没有下降，但我会认为没有评论的低估意味着低估了它的人发现问题符合工具提示中提到的问题：要么没有显示研究工作，要么不明确，要么没有用。因此，你的问题的答案是可以适当的，因为三者中的一个适用于那个人。回到话题上，从我的问题+1。我认为这是一个有用的问题。总是有很多关于动画和超时的知识。对于jQuery功能以外的平滑过渡，如果它是OP的选择，那么CSS转换可能是一种方法。 – Nope

您需要从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) 
});

Example fiddle

来源

2012-11-28 12:59:52

有时我不确定堆栈溢出的成功是由于其经过深思熟虑的设计或其一些有用且知识渊博的用户群的价值。谢谢！ :) – Barney

+1为一个好/有用的答案。 @Barney：另外jQuery动画对平滑度有限制。在你的情况下，它会做的很好，但如果你用jQuery动画卡住和沮丧，试着看看CSS3转换。非常流畅，大多数浏览器都支持它的大范围。在大多数情况下，IE是例外的例外。关于你评论中的问题：我的观点是答案。没有其他人就无法工作。这绝非完美，但它是平衡的。 – Nope

用jQuery水平滑动DIV

回答

相关问题