Jquery.animate() 在 webkit 背景上

Question

如何在 $(this) 上使用 Jquery 方法 .animate() 进行以下操作：

background: -webkit-gradient(linear, left top, left bottom, from(#2d2d2d), to(#373737))

我尝试使用：

$(this).css("background", "-webkit-gradient(linear, left top, left bottom, from(#d70000), to(#679938))");

效果很好，但我想定义转换所需的时间

Answer 1

像这样使用 jQuery animate 方法：

$(this).animate({"background": "-webkit-gradient(linear, left top, left   bottom, from(#d70000), to(#679938))"}, 4000/* Your transition MS here, ex. 4000 */);

有关 animate 方法的详细信息，请单击 here.

如果你使用的是jQuery的低版本（好吧，这个方法是从1.0.0版本开始发布的，但有些版本可能不支持），并且animate方法不起作用，那么这是一个替代方案：

$(this).delay(4000).css("background", "-webkit-gradient(linear, left top, left bottom, from(#d70000), to(#679938))");

Answer 2

@-webkit-keyframes changeBG {
    0% {
        background: -webkit-gradient(linear, left top, left bottom, from(#2d2d2d), to(#373737));
}
50% {
    background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#737373));
}
100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#2d2d2d), to(#373737));
}

我使用 -webkit-keyframes 解决了这个问题，并在 class 中进行了更改，持续时间为 200 毫秒。如果有人有想法，如何在不移动 classes 的情况下直接使用 Jquery 涉及 -webkit-keyframes，请写下您的答案。另外，我不知道为什么 .animate() 不起作用。如果有人对此有答案，我将不胜感激

$(this).addClass('akt');
        setTimeout(function () { $(this).removeClass('akt'); }, 200);

Jquery.animate() 在 webkit 背景上

Jquery.animate() on webkit background

javascript

jquery

jquery-animate