jQuery .animate(); not running? Not even jumping, nothing's happening

I am trying to create an animation on a list (ul) of li's. I want to be able to click any li.answer and have them all move one by one to the right and then fade out. Then I want them (while invisible) to return to their original places, go back by 100px, and move to the right while fading in, to make it look like one set is disappearing, then another is appearing. (I have a function changing the content between the two animations, and this program is for mobile so I don't want to have more than one set of li's). My problem is that I'm seeing absolutely no animation in my webpage, but I'm also getting no errors and my console.log()s are running normally. Thank you, and sorry if this is obvious!

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 (NOTE: I'm using Handlebars to update my content dynamically.

<li class="activeQuestion">
      <p class="well well-sm col-sm-4" id="questionArea">{{question}}</p>
      <ul class="container-fluid col-sm-12">
        {{#each answers}}
          <li class="answer"> {{this}}</li>
        {{/each}}
      </ul>
 </li>