jQuery .animate（）; 沒有運行？ 甚至沒有跳，什么也沒發生

Question

我正在嘗試在li的列表（ ul ）上創建動畫。 我希望能夠單擊任何li.answer並使它們全部向右一個一個地移動，然后淡出。 然后，我希望它們（不可見）返回其原始位置，向后移100px，並在淡入時向右移動，以使其看起來像一組消失了，然后又出現了。 （我有一個功能可以在兩個動畫之間更改內容，並且該程序是針對移動設備的，因此我不希望使用一組以上的li ）。 我的問題是我的網頁上完全看不到動畫，但是我也沒有收到任何錯誤，並且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"
  })
}