jQuery .animate（）; 没有运行？ 甚至没有跳，什么也没发生

Question

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

<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

here is the code 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"
  })
}