如何複合jquery動畫

我不太確定如何說出這個問題（這可能是爲什麼我還沒有找到答案）。我想要複合jquery動畫的效果。具體而言，我期望創建一個自定義滾動，以便單擊箭頭時，<div>稍微向上移動。如何複合jquery動畫

我以爲我會用相對單位animate函數，但是當我嘗試重複動畫時，它不起作用。這是基本的代碼：

的JavaScript：

$(".arrow-down").click(function(){$('#t1').animate({marginTop: '-=50px'});});

HTML：

<div id = "text"> 
    <div class="arrow-down"></div> 
    <div id = "t1"> 
     <h1>Title</h1> 
     <p>TEXT</p> 
    </div> 
</div>

謝謝！

來源

2015-05-23 Theodore_Kim

__PLEASE__請請請不要來實現自定義滾動。他們是絕對__用戶體驗___。你也可以讓人們在紙上打印出你的頁面來閱讀它。 – Mathletics

@Mathletics好吧，但是您如何修復滾動條，使其不會超出div的範圍，從而使網站的整體價格便宜？我是一個業餘愛好者，並希望得到任何建議。 –

問題是什麼？這裏有一個看起來很好的演示：https://jsfiddle.net/samuraii/gafp91gb/ – Samurai

這是期望的效果，還是您希望在按下箭頭兩次後重新上移？

$(".arrow-down").click(function() { 
 
    $('#t1').animate({ 
 
    marginTop: '+=50px' 
 
    }); 
 
}); 
 

 
$(".arrow-up").click(function() { 
 
    $('#t1').animate({ 
 
    marginTop: '-=50px' 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="text"> 
 
    <button type="button" class="arrow-down">\/</button> 
 
    <button type="button" class="arrow-up">/\</button> 
 
    <div id="t1"> 
 
    <h1>Title</h1> 
 
    <p>TEXT</p> 
 
    </div> 
 
</div>

來源

2015-05-23 17:44:00 oMiKeY

是的，這是所需的效果。謝謝您的回答。你的例子實際上幫助我找到答案。當div向上移動時，它與箭頭重疊，不允許再次點擊箭頭。 –

對不起，我實現的修復是定位它與一個更高的Z指數，然後滾動的div爲了讓按鈕再次按下時，div滾動了 –

啊哈！好主意。我遇到了重疊問題。 – oMiKeY

如何複合jquery動畫

回答

相關問題