Jquery animasyonum duraksayarak gerçekleşiyor

Kodlardan gördüğünüz gibi böyle bir şey yaptım. page-1 i settings içerisinde jquery animate methodu ile kaydırdığım zaman animasyonum duraklıyor.

Yani tek bir animasyonu 2 adımda yapıyormuş gibi oluyor. Animasyonun gerçekleşme süresini arttırıp azaltsam bile değişen bir şey olmuyor. Yine 2 adımda yaparmış gibi oluyor.

Sizce neyden kaynaklı olabilir?


<div id="settings">                  
    <button id='tikla'>Tıkla</button>
    
    <div id="page-1">
        <p>deneme</p>
    </div>


$('#tikla').click(function() {
       $('#page-1').animate({
        'left': '-=300px',
    }, 300);
});

#settings {
    height: 370px;
    width: 550px;
    border-radius:15px;
    background: linear-gradient(50deg, #770a029d, #ffffffd5);
    border: 1px solid white;
    position:absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -350px;
    z-index: 313131;
    overflow: hidden;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.733);
    font-family: 'Heebo', sans-serif;
}

#page-1 {
    position: relative;
}