Question

我正在尝试使用jQuery在两个CSS动画之间切换，但它们只能工作一次！我怎样才能让它继续翻转？而且，由于某种原因，这似乎在jsFiddle中根本不起作用。拜托，谢谢你。

//hide and show counter-button
$('#counter-button').click(function() {
  $('#counter').toggle();

  //move button down/up on click
  if ($('#counter-button').attr('class') === 'movedown') {
    $('#counter-button').addClass('moveup');

  } else {
    $('#counter-button').addClass('movedown');
  }
});

#counter-button {
  font-size: 20px;
  position: fixed;
  right: 90px;
  bottom: 190px;
  z-index: 2;
  cursor: pointer;
}

.movedown {
  animation: down ease forwards 0.5s;
}

@keyframes down {
  from {
    right: 90px;
    bottom: 190px;
  }
  to {
    right: 90px;
    bottom: 100px;
  }
}
.moveup {
  animation: up ease forwards 0.5s;
}
@keyframes up {
  from {
    right: 90px;
    bottom: 100px;
  }
  to {
    right: 90px;
    bottom: 190px;
  }
}
#counter {
  position: fixed;
  height: 80px;
  width: 228px;
  bottom: 100px;
  right: 20px;
  border: 2px solid black;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter-button">
  COUNTER
</div>

<div id="counter"></div>

Answer 1

而不是<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="counter-button" class="moveup"> COUNTER </div> <div id="counter"> </div>使用.attr('class') === 'movedown'检查班级。在添加hasClass()类时，您应该删除moveup类，反之亦然。

检查下面的代码。

movedown

//hide and show counter-button
$('#counter-button').click(function() {
  $('#counter').toggle();

  //move button down/up on click
  if ($('#counter-button').hasClass('movedown')) {
    $('#counter-button').addClass('moveup').removeClass('movedown');
  } else {
    $('#counter-button').addClass('movedown').removeClass('moveup');
  }
});

#counter-button {
  font-size: 20px;
  position: fixed;
  right: 90px;
  bottom: 190px;
  z-index: 2;
  cursor: pointer;
}

.movedown {
  animation: down ease forwards 0.5s;
}

@keyframes down {
  from {
    right: 90px;
    bottom: 190px;
  }
  to {
    right: 90px;
    bottom: 100px;
  }
}
.moveup {
  animation: up ease forwards 0.5s;
}
@keyframes up {
  from {
    right: 90px;
    bottom: 100px;
  }
  to {
    right: 90px;
    bottom: 190px;
  }
}
#counter {
  position: fixed;
  height: 80px;
  width: 228px;
  bottom: 100px;
  right: 20px;
  border: 2px solid black;
  border-radius: 5px;
}

Answer 2

您忘记删除不必要的类，因此意外行为。只需添加[attr.attrName]并删除相应的类。

下面的代码段

removeClass

//hide and show counter-button
$('#counter-button').click(function() {
  $('#counter').toggle();

  //move button down/up on click
  if ($('#counter-button').attr('class') === 'movedown') {
    $('#counter-button').addClass('moveup').removeClass('movedown');

  } else {
    $('#counter-button').addClass('movedown').removeClass('moveup');
  }

});

#counter-button {
  font-size: 20px;
  position: fixed;
  right: 90px;
  bottom: 190px;
  z-index: 2;
  cursor: pointer;
}
.movedown {
  animation: down ease forwards 0.5s;
}
@keyframes down {
  from {
    right: 90px;
    bottom: 190px;
  }
  to {
    right: 90px;
    bottom: 100px;
  }
}
.moveup {
  animation: up ease forwards 0.5s;
}
@keyframes up {
  from {
    right: 90px;
    bottom: 100px;
  }
  to {
    right: 90px;
    bottom: 190px;
  }
}
#counter {
  position: fixed;
  height: 80px;
  width: 228px;
  bottom: 100px;
  right: 20px;
  border: 2px solid black;
  border-radius: 5px;
}

更新代码

此外，您可以通过最初向<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="counter-button"> COUNTER </div> <div id="counter"> </div>添加课程moveup来优化上述代码，然后您可以使用button而无需检查任何条件。

toggleClass

//hide and show counter-button
$('#counter-button').click(function() {
  $('#counter').toggle();
  //move button down/up on click
    $(this).toggleClass('movedown moveup');
});

#counter-button {
  font-size: 20px;
  position: fixed;
  right: 90px;
  bottom: 190px;
  z-index: 2;
  cursor: pointer;
}
.movedown {
  animation: down ease forwards 0.5s;
}
@keyframes down {
  from {
    right: 90px;
    bottom: 190px;
  }
  to {
    right: 90px;
    bottom: 100px;
  }
}
.moveup {
  animation: up ease forwards 0.5s;
}
@keyframes up {
  from {
    right: 90px;
    bottom: 100px;
  }
  to {
    right: 90px;
    bottom: 190px;
  }
}
#counter {
  position: fixed;
  height: 80px;
  width: 228px;
  bottom: 100px;
  right: 20px;
  border: 2px solid black;
  border-radius: 5px;
}

Answer 3

使用toggleClass

     //hide and show counter-button
    $('#counter-button').click(function() {
      $('#counter').toggle();

        $('#counter-button').toggleClass('moveup movedown');


    });

#counter-button {
  font-size: 20px;
  position: fixed;
  right: 90px;
  bottom: 190px;
  z-index: 2;
  cursor: pointer;
}
.movedown {
  animation: down ease forwards 0.5s;
}
@keyframes down {
  from {
    right: 90px;
    bottom: 190px;
  }
  to {
    right: 90px;
    bottom: 100px;
  }
}
.moveup {
  animation: up ease forwards 0.5s;
}
@keyframes up {
  from {
    right: 90px;
    bottom: 100px;
  }
  to {
    right: 90px;
    bottom: 190px;
  }
}
#counter {
  position: fixed;
  height: 80px;
  width: 228px;
  bottom: 100px;
  right: 20px;
  border: 2px solid black;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter-button" class="moveup">
  COUNTER
</div>

<div id="counter">

</div>

使用jQuery切换两个CSS动画只能使用一次

3 个答案: