Как объединить анимацию 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>