用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

回答

相關問題