0

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

jsFiddle

所以我想让这些词出现在前面，改变颜色并淡入背景并再次改变颜色。

我现在使用的 .animate 方法不是很流畅，我搜索了 stackoverflow 并没有找到好的解决方案，但是我找到了它不起作用的原因：渲染和浏览器兼容性。详细信息可以在这里找到

我阅读了一些关于 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"});

有人对此有解决方案吗？

提前致谢

4

3 回答 3

0

您可以尝试使用 jQuery Transit 插件：jQuery Transit

于 2013-07-22T15:16:51.677 回答
0

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

var duration = 1400;

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

ani();

小提琴

于 2013-07-22T15:18:36.357 回答
0

我会做类似的事情，以实现平稳过渡：

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"});

提琴手视图

于 2013-07-22T15:52:59.273 回答