jQuery .animate(); не бегать? Даже не прыгает, ничего не происходит

Question

Я пытаюсь создать анимацию в списке (ul) из li"S. Я хочу быть в состоянии нажать на любую li.answer и пусть они все переместятся один за другим вправо, а затем исчезнут. Затем я хочу, чтобы они (пока они были невидимыми) вернулись на свои исходные места, вернулись на 100 пикселей и переместились вправо во время появления, чтобы выглядело так, как будто один набор исчезает, а затем появляется другой. (У меня есть функция, изменяющая содержимое между двумя анимациями, и эта программа предназначена для мобильных устройств, поэтому я не хочу иметь более одного набора li"S). Моя проблема в том, что я не вижу абсолютно никакой анимации на моей веб-странице, но я также не получаю ошибок, и мой console.log()с работают нормально. Спасибо, и извините, если это очевидно!

JS / JQuery:

$(".answer").click(function() {
    animateOut(this);
    console.log("Animation Sent");
  });

function animateOut(thiz) {
  console.log(thiz,"thiz")
  $siblings = $(thiz).siblings();
  $parent = $(thiz).parent();
  $(thiz).animate({
    left: "+=300px",
    opacity: "0"
  })
}

function returnAnimate(thiz, $siblings, $parent) {
  $(thiz).animate({left: "-=400px"})
  $(thiz).animate({
    left: "+=100px",
    opacity: "1"
  })
}

CSS:

.answer {
  position: relative !important;
  color: #333;
  font-size: 1.2em;
  display: inline-block;
  padding: 7px;
  margin-bottom: 7px;
  background-color: #FE1263;
  text-align: center;
  position: relative;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0px -5px 0px #b2013f inset;
}

HTML

<li class="activeQuestion">
      <p class="well well-sm col-sm-4" id="questionArea">How Do You Like Your Coffee?</p>
      <ul class="container-fluid col-sm-12">
          <li class="answer"> Black, Like My Soul</li>
          <li class="answer"> I Don't Drink Coffee</li>
          <li class="answer"> Espresso, Double Shot</li>
          <li class="answer"> Skinny Vanilla Latte</li>
      </ul>
</li>

Answer 1

Вот код HTML

 <li class="activeQuestion">
          <p class="well well-sm col-sm-4" id="questionArea">question</p>
          <ul class="container-fluid col-sm-12">

              <li class="answer"> test</li>
              <li class="answer"> test</li>
              <li class="answer"> test</li>
              <li class="answer"> test</li>

          </ul>
     </li>

CSS

.answer {
  position: relative !important;
  color: #333;
  font-size: 1.2em;
  display: inline-block;
  padding: 7px;
  margin-bottom: 7px;
  background-color: #FE1263;
  text-align: center;
  position: relative;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0px -5px 0px #b2013f inset;
}

JS

$(".answer").click(function() {
var sib=$(this).siblings().andSelf();
var parent=$(this).parent();
    animateOut(sib);
    console.log("Animation Sent");
    returnAnimate(this,sib,parent);
  });

function animateOut(thiz) {
  console.log(thiz,"thiz")
  $siblings = $(thiz).siblings();
  $parent = $(thiz).parent();
  $(thiz).animate({
    left: "+=300px",
    opacity: "0"
  })
}

function returnAnimate(thiz, $siblings, $parent) {
  $($siblings).animate({left: "-=400px"})
  $($siblings).animate({
    left: "+=100px",
    opacity: "1"
  })
}