javascript - 第一节课完成后切换第二节课？

Question

准确地说，我有:

$('.vidsh_sub_btn').on('click', function() {
  $('.vidsub_rld_c').toggleClass('goright');
  // toggle godown class while goright class is completed moving left to 75px
  $('.vidsub_rld_c').toggleClass('godown');
  $('.vidsub_rld_c').toggleClass('goleft');
  $('.vidsub_rld_c').toggleClass('gotop');
});

.vidsubbtn_c {
  position: absolute;
  height: 34px;
  width: 84px;
  background: black;
  overflow: hidden;
}

.vidsub_rld_c {
  position: absolute;
  height: 10px;
  width: 10px;
  background: white;
  transition: all 700ms;
  left: 0px;
  z-index: 50;
}

.vidsub_rld_c.goright {
  left: 75px;
}

.vidsub_rld_c.godown {
  top: 25px;
}

.vidsub_rld_c.goleft {
  left: 0px;
}

.vidsub_rld_c.gotop {
  top: 0px;
}

.vidsh_sub_btn {
  position: absolute;
  z-index: 100;
  margin-top: 2px;
  margin-left: 2px;
  height: 30px;
  width: 80px;
  overflow: hidden;
  background: #8495a4;
  -moz-border-radius: 2px;
  border-radius: 2px;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
  <div class="vidsub_rld_c"></div>
  <input type="button" class="vidsh_sub_btn" value="Add" />
</div>

我基本上想要的是 vidsub_rld_c 应该完成按钮的一圈，基本上看起来像一个加载对象。

但是我在脚本中实现的方式是，当调用单击事件监听器时，它会同时执行所有切换类，这使得加载器看起来没有移动。

<强> JSFiddle

Answer 1

您可以切换一个类，并使用 CSS 动画来创建效果。

fiddle

一个基本示例:

$('.vidsh_sub_btn').on('click', function() {
  $('.vidsub_rld_c').toggleClass('animate');
});

.vidsubbtn_c {
  position: absolute;
  height: 34px;
  width: 84px;
  background: black;
  overflow: hidden;
}

.vidsub_rld_c {
  position: absolute;
  height: 10px;
  width: 10px;
  background: white;
  transition: all 700ms;
  left: 0px;
  z-index: 50;
}

.vidsub_rld_c.animate {
  animation: moveAround 1s infinite;
}

@keyframes moveAround {
  0% {
    left: 0;
    top: 0;
  }
  25% {
    left: 75px;
    top: 0;
  }
  50% {
    left: 75px;
    top: 25px;
  }
  75% {
    left: 0;
    top: 25px;
  }
  100% {
    left: 0;
    top: 0;
  }
}

.vidsh_sub_btn {
  position: absolute;
  z-index: 100;
  margin-top: 2px;
  margin-left: 2px;
  height: 30px;
  width: 80px;
  overflow: hidden;
  background: #8495a4;
  -moz-border-radius: 2px;
  border-radius: 2px;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
  <div class="vidsub_rld_c"></div>
  <input type="button" class="vidsh_sub_btn" value="Add" />
</div>