多个 .CSS Jquery 行答案

【问题标题】：Multiple .CSS Jquery lines多个 .CSS Jquery 行
【发布时间】：2013-07-23 00:10:35
【问题描述】：

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

所以我想让文字出现在最前面，改变颜色并淡入背景并再次改变颜色。

我现在使用的 .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"});

有人对此有解决方案吗？

提前致谢

【问题讨论】：

标签： jquery css jquery-ui

【解决方案1】：

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

var duration = 1400;

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

ani();

FIDDLE

【讨论】：

这很好用，但现在动画不是无限循环的。如何设置备份？
@BenRomijn - 你在 javascript 中创建了一个递归。编辑了答案

【解决方案2】：

你可以尝试使用jQuery中转插件：jQuery Transit

【讨论】：

【解决方案3】：

为了顺利过渡，我会做类似的事情：

HTML

<div id="x" >TEXT TO ANIMATE</div>

CSS

#x{
position:absolute;
top: 100px;
left: 200px;
color: #0000FF;
font-size: 40px;
}


@-webkit-keyframes pulse_animation {
    50% { -webkit-transform: scale(2); }
    100% { -webkit-transform: scale(0.5); }
}

JavaScript

var duration = 2800;
$('#x').css({"-webkit-animation-duration": duration + "ms", "color":"#E5352D", "-webkit-animation-name": 'pulse_animation', "-webkit-animation-timing-function": "ease-in"});

Fiddler View

【讨论】：