Question

我有HTML代码：

<div class="block-1"></div>
<div class="block-2"></div>
<div class="block-3"></div>

我需要这个算法：

对于 .block-1 ，添加课程有效
等待500毫秒。 - .block-2 添加课程有效
等待400毫秒。 - .block-3 添加课程有效
等待500毫秒。 - 删除所有课程有效并重复所有

但是有一些问题......

这是动画：

.block-1 包含样式height: 0; transition: height .5s linear;

.block-1.active包含样式height: 100px;

因此，块高度从0px到100px变化500 ms。

我尝试添加延迟：

$('.block-1').addClass('active');
$('.block-2').delay(500).addClass('active');
$('.block-3').delay(900).addClass('active');
...

但延迟不能正确使用 addClass 。

P.S。我需要在addClass中。我不能使用动画，例如

$('.block-1').animate({height: 100px}, 500);

...因为这只是演示代码，而在我的真实代码中，我不仅有一个高度，还有很多其他属性。

下一个问题是延迟。从一开始就考虑延迟，我需要编写代码，例如：

第一步
第二步 - 延迟500
第三步 - 延迟900
第四步 - 延迟1200
...

但是我有大约40个步骤，如果我尝试编辑其中一个步骤，我会遇到很多问题......

P.S。抱歉我的英语不好（我是圣彼得堡的表格）。

Answer 1

他们中的很多人......这样做......不那么容易混淆......

function doStuff()
{
          $('.block-1').addClass('active');
          setTimeout(function() {  $('.block-2').addClass('active');  }, 500);
          setTimeout(function() { $('.block-3').addClass('active'); }, 900);
          setTimeout(function() { $('.block-1, .block-2, .block-3').removeClass('active'); },1300);

}

doStuff();

setInterval(function() { doStuff();  }, 1400);

Answer 2

听起来不错，但是：

setInterval(function() {
  $('.block-1').addClass('active');
  setTimeout(function() {
    $('.block-2').addClass('active');
    setTimeout(function() {
      $('.block-3').addClass('active');
      setTimeout(function() {
        $('.block-1, .block-2, .block-3').removeClass('active');
      }, 500);
    }, 400);
  }, 500);
}, 1400);

Answer 3

如果我以正确的方式得到你，你想等到你的街区的转换结束以激活另一个块，所以你可以抓住transitionEnd事件，然后添加下一个类，如：

$('#block-1').
addClass('active').
on('transitionEnd webkitTransitionEnd mozTransitionEnd 
  msTransitionEnd oTransitionEnd ', function(){
  $('#block-2').addClass('class-2').on(/*so on here*/);
  //
})

如何设置和旋转此代码？

3 个答案: