функция анимации из jQuery не работает должным образом

Question

Я пытаюсь оживить навигацию, но не могу приступить к работе.Я хочу, чтобы контейнер навигационного контента (это ul) скользил слева, а не сверху. Спасибо!

Это рабочий пример.https://ebooks.webflow.com/ebook/the-freelance-web-designers-guide при нажатии на кнопку «просмотреть главы».

$(document).ready(function(){
    $('.bookName').click(function(e) {
        if ($(window).width() <= 550) {
          e.preventDefault();
          $('.book-navigation ul li ul').toggleClass('toggleNav').animate({left: '-1000px'});
          $(this).toggleClass('changeIcon');
        }
      });
  });

  .book-navigation ul li ul.toggleNav {
    display: block;
  }
  
  @media only screen and (max-width: 550px) {
    .book-navigation ul li ul {
      display: none;
    }
    .bookName::before {
      content: '+';
      padding-right: 10px;
    }
    .bookName .changeIcon::before {
      content: '-';
      padding-right: 10px;
    }
  }
  
  .book-navigation ul li ul {
    background: red;
  }
  a {
    text-decoration: none;
  }
  li {
    list-style: none;
  }
  .book-navigation {
    background: gray;
    margin-bottom: 100px;
  }
  .bookName {
    text-transform: uppercase;
    font-size: 30px;
  }
  li {
    margin-right: 30px;
  }
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="book-navigation">
        <ul>
            <li>
                <a href="#" class="bookName">Book 1 Name</a>
                <ul>
                    <li><a href="#">Book 1 Chapter 1</a></li>
                    <li><a href="#">Book 1 Chapter 2</a></li>
                    <li><a href="#">Book 1 Chapter 3</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <p>you are in Book 1 Name cover page</p>