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