Question

我建立了一个带有jQuery动画的网络，但是当我在移动设备上测试时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);

Answer 2

对于JQuery中指定的效果，请使用回调函数。当前段完成后，可以调用这些函数。

例如，在动作完成后执行defunethe函数

function complete() {
$( "<div>" ).text( this.id ).appendTo( "#log" );
}

并将效果调用为

$( "#box1" ).fadeOut( 1600, "linear", complete );

这将淡化元素，一旦完成，将调用complete()

Answer 3

作为超时的替代方法，您可以尝试以下

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

链jQuery的行为一个接一个地延迟

3 个答案: