jQuery .animate();不跑？连跳都没有，什么都没有发生

Question

我正在尝试在 li 的列表 (ul) 上创建动画。我希望能够单击任何li.answer 并让它们全部向右移动然后淡出。然后我希望它们（虽然不可见）回到原来的位置，返回 100 像素，并在淡入时向右移动，使其看起来像是一组正在消失，然后另一组正在出现。 （我有一个功能可以改变两个动画之间的内容，而且这个程序是针对移动设备的，所以我不想拥有一组以上的li）。我的问题是我的网页中完全看不到动画，但我也没有收到任何错误，而且我的 console.log()s 运行正常。谢谢，如果这很明显很抱歉！

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"
  })
}