Why doesn't .animate({ "top": "-=50px" }, work?

Question

css

There is a button in which there are two blocks. They should move up on click, while the button itself remains in place. Here is the html:

<div class="get-form">
<div class="blue-button">Pay 20$ </div>
<div class="green-button">Thank you ;-)</div>
</div>

Here is their css:

.get-form {
   margin-top: 7px;
   width: 262px;
    height: 53px;
  overflow: hidden;
   border-radius: 7px;
z-index: 9999;
   
    text-align: left;
    letter-spacing: .6px;
}

.blue-button {
    background-color: #5cc1ec;
    display: inline-block;
    color: #fff;
  font-family: 'helvetica';
    font-weight: 500;
    font-size: 17px;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 25px;
    
    width: 238px;
    position: relative;
    margin-top: 0px
}

.green-button {
     background-color: #2ce52c;
    display: inline-block;
    color: #fff;
  font-family: 'helvetica';
    font-weight: 500;
    font-size: 17px;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 25px;
    
    width: 238px;
    margin-bottom: 0;
    position: relative;
    margin-top:0px 
}

And here is the script itself:

<script> 
$( ".blue-button" ).click(function(){
  $( ".blue-button" ).animate({ "top": "-=50px" }, 'easeOutBack' );
  
});
</script>
    
<script> 
$( ".blue-button" ).click(function(){
  $( ".green-button" ).animate({ "top": "-=50px" }, 'easeOutBack' );
});
</script>

Answer 1

replace -=50 with just -50px