Question

我正在尝试在ul的列表（li）上创建动画。我希望能够点击任何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"
  })
}

jQuery .animate（）;没跑？甚至没有跳跃，没有任何事情发生

1 个答案: