第一堂课完成后切换第二堂课？

Question

确切地说，我有：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

JSFiddle

Answer 1

<强> rename_axis

您可以使用 $('.vidsh_sub_btn').on('click', function() { setInterval(function() { $('.vidsub_rld_c').toggleClass('godown'); $('.vidsub_rld_c').toggleClass('goright'); }, 700); }); 通过在每个＆＃39; x＆＃39;之后连续切换班级来完成圈子。时间，如：

$('.vidsh_sub_btn').on('click', function() {
  setInterval(function() {
    $('.vidsub_rld_c').toggleClass('godown');
    $('.vidsub_rld_c').toggleClass('goright');
  }, 700);
});

代码：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    var simpleClass = {

        testAttribute : "test", // atttribute

        testMethod : function() //method
        { 
            return testAttribute; } 

    };
    var simpleClassObj = new simpleClass();
    simpleClassObj.testAttriute;
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以切换一个类，并使用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>

Answer 3

您可以使用jQuery UI，以便链接您的类切换 像：

$('.vidsh_sub_btn').on('click', function() {
   $('.vidsub_rld_c').toggleClass('goright', 2000).promise().done(function(){
       $('.vidsub_rld_c').toggleClass('godown', 2000);
   });
});

https://codepen.io/anon/pen/QajaPm