javascript - 如何复合Jquery动画

Question

我不太确定如何表达这个问题(这可能就是我还没有找到答案的原因)。我想复合 Jquery 动画的效果。具体来说，我希望创建一个自定义滚动，以便当单击箭头时，<div>略有上升。

我想我会使用 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>

谢谢!

Answer 1

这是想要的效果还是您希望按两次箭头后它会向上移动？

$(".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>