jquery - 将 jQuery 的 Action 一个接一个地延迟

Question

我用 jQuery 动画构建了一个 web，但是当我在移动设备上测试它时，grrrr..现在我正在尝试尽可能多地使用 CSS，因为我不知道它在移动设备上的效果有多糟糕。

我正在尝试淡出和淡入某些元素，为淡出添加 CSS 类 .easeOuts，为淡入添加 .easeIns:

.easeIns{
   opacity:1;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   transition: all 0.5s linear;   
}

.easeOuts{
   opacity:0;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   transition: all 0.5s linear;   
}

我试着淡出一个元素:

$('.sectionTitle').addClass('easeOuts');

并且在线性淡出方面效果很好，但是当尝试继续对该元素的假设操作进行编程时(淡出，在不可见时更改内容并再次淡入)它只是不应用淡出和效果，只是改变不遵守任何顺序的内容:

$('.sectionTitle').addClass('easeOuts').delay(100).html("hola").removeClass('easeOuts').addClass('easeIns');

我如何创建一个链来遵守行动的命令和它们之间的延迟？这是使用 CSS 为元素设置动画的正确方法吗？

Answer 1

使用 setTimeout 实现您所追求的快速示例!

$('.sectionTitle').addClass('easeOuts');
setTimeout(function(){ $('.sectionTitle').html("hola").removeClass('easeOuts').addClass('easeIns'); }, 100);