jQuery.animate（）；不跑步？甚至不跳，什么也没有'；发生什么事了

我正在尝试在

li

的列表（

ul

）上创建动画。我希望能够单击任何

li。回答
，让它们一个接一个地向右移动，然后淡出。然后我想让它们（虽然看不见）回到原来的位置，以100px的速度返回，然后在淡入时向右移动，使它看起来像一组正在消失，然后另一组正在出现。（我有一个功能，可以在两个动画之间更改内容，而且这个程序是为移动设备设计的，所以我不想拥有多套
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"
  })
}

.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;
}

CSS:

$(".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"
  })
}

.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>


您喜欢喝什么样的咖啡

黑色，就像我的灵魂
我不喝咖啡
浓缩咖啡，双份
瘦香草拿铁


这是代码
HTML

JS

你也可以粘贴html吗？你可以在问题中包括呈现的
html
？在JSFIDLE中它似乎可以工作，但在我的项目中没有。。。一定是别的东西，谢谢！不，还是有点不对劲。。。。你熟悉handlebar.js吗？我想这可能与此有关，稍后可能会添加一个setTimeout（）。您好，您可以将代码添加到答案中，而不是将其放在小提琴中吗？对不起，我不熟悉handlebar.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"
  })
}