jQuery .animate（）;走っていない？ジャンプしても何も起こっていない

Question

liのリスト（ul）でアニメーションを作成しようとしています。いずれかのli.answerをクリックして、それらをすべて右に移動してからフェードアウトさせたいと思っています。その後、元の場所に戻って、100ピクセル後ろに戻って右に移動して、消えていくように見せて、別のものが現れるようにします。 （私は2つのアニメーションの間でコンテンツを変更する機能を持っています、そして、このプログラムはモバイル用ですので、liの複数のセットを持つことは望ましくありません）。私の問題は、私のWebページには全くアニメーションが見えませんが、エラーもなく、私の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; 
} 

<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はここにコードです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" 
    }) 
}