Почему не работает .animate({ "top": «-=50px» },?

Question

[istasiik]

Есть кнопка, в которой два блока. Они должны смещаться вверх по клику, при этом сама кнопка остается на месте. Вот html:

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

Вот их 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 
}

А вот и сам скрипт:

<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

[Gasoid]

замените -=50 на просто -50px

Comments

[istasiik]

Так?

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

Не работает все равно

[Gasoid]

@istasiik еще нужен

$(document).ready(function(){
$( ".blue-button" ).click(function(){
 
  $( ".green-button" ).animate({ "top": "-50px" }, 'easeOutBack' );
});

$( ".blue-button" ).click(function(){
  $( ".blue-button" ).animate({ "top": "-50px" }, 'easeOutBack' );
  
});
});

[istasiik]

@Gasoid спасибо!

Answer 2

[Александр Вульф]

В JQ не требуется указывать px. Пишите без них:

$( ".blue-button" ).click(function(){
  $( ".blue-button, .green-button" ).animate({ top:  -50 }, 'easeOutBack' );
});

ну и пишите это перед</body>

Comments

[istasiik]

спасибо!