jquery - 多个 .CSS Jquery 行

Question

我对 jquery 很陌生，但设法做了一些设计师想要的效果，看看这个 fiddle :

jsFiddle

所以我希望文字出现在前面，改变颜色，淡出背景，然后再次改变颜色。

我现在使用的 .animate 方法不是很流畅，我搜索了 stackoverflow 并没有找到好的解决方案，但是我找到了它不起作用的原因:具有渲染和浏览器兼容性的东西。详情可查here

我阅读了一些关于 jquery .css 方法的内容并开始尝试。过渡确实顺畅得多。唯一的问题是我似乎无法组合多种样式，因此它们将一个接一个地动画化，就像我可以使用 .animate 方法所做的那样:如上面的 jfiddle 所示

var duration = 1400;
$('.dgrey').css({"-webkit-transform":"scale(2)","-webkit-transition-timing-function":"ease-in", "-webkit-transition-duration": duration + "ms", "color":"#E5352D"});
$('.dgrey').css({"-webkit-transform":"scale(0.5)","-webkit-transition-timing-function":"ease-in", "-webkit-transition-duration": duration + "ms", "color":"#DDDDDD"});

有人对此有解决方案吗？

提前致谢

Answer 1

有 webkit 转换结束事件等，但是对于你已经有持续时间的地方，简单的超时似乎更容易:

var duration = 1400;

function ani() {
     $('.dgrey').css({'animation here'});
     setTimeout(function() {
         $('.dgrey').css({next animation here});
         setTimeout(ani, duration);
     }, duration);
}

ani();

FIDDLE