Javascript 转换属性jquery

使用上面的Jquery，我希望scale属性在前20秒运行，然后skew属性在接下来的20秒运行，但这里它只执行skew。我想为下一个语句提供20秒的延迟，但是还有其他简单的方法吗？谢谢

您不能将

.delay（）

用于CSS属性。相反，您可以尝试使用

setInterval（）

函数，根据所需的预定义变换集，逐步将变换添加到元素中。我在这里做了一把小提琴-

这个答案是在这样一个假设下做出的，即您希望最终在元素的最终状态下缩放和倾斜元素

让我稍微解释一下我的代码：

$(document).ready(function(){
      $('#space').css({
            '-webkit-transform': 'scale(2,3)',
        });
        $('#space').css({
            '-webkit-transform': 'skew(30deg,20deg)',
        });
      });

CSS
 #space{transition:duration:20s;}

$（文档）.ready（函数（）{
var$spce=$（“#空格”），
trsfm=[]，//为转换声明空数组
延迟=1000，//以毫秒为单位设置延迟
count=0；//设置迭代计数
//声明要在其中进行转换的逐步数组
trsfm=[‘比例（2,3）’，‘倾斜（30度，20度）’；
var timer=window.setInterval（函数（）{
如果（计数

我已经定义了延迟1000ms（当然您可以更改它），并且还使用了一个数组来存储您想要应用的所有转换。变换以从左到右的逐步方式应用，从缩放开始，然后到倾斜

---

设置计时器并开始计数。每次达到间隔时，脚本都会检查您是否已迭代转换数组。如果没有，它将通过从一开始就加入数组中的项，然后在任何一步停止（使用

.slice（）

）方法：）

使用delay（），这是因为你用skew覆盖了比例。@dreamweiver谢谢我一直在尝试语法，但无法理解它。你能告诉我它的语法吗。谢谢$（“#space”）.css（{'-webkit transform'：'skew（30deg，20deg），}）.delay（2000）；？是吗？是的，这就是语法，你可以参考Jquery网站了解更多详细信息：）快乐编码你不能在设置CSS属性时使用延迟。仅适用于效果。我正在删除我的答案，我不确定延迟是否适用于CSS。。按照你写的。。

$(document).ready(function () {
    var $spce = $("#space"),
        trsfm = [],            // Declare empty array for transforms
        delay = 1000,          // Set delay in ms
        count = 0;             // Set iteration count

    // Declare a stepwise array where you want the transform to occur
    trsfm = ['scale(2,3)', 'skew(30deg,20deg)'];

    var timer = window.setInterval(function () {
        if(count < trsfm.length) {
            // Increase count by 1
            count += 1;

            // Stepwise addition of transforms
            var trsfmStep = trsfm.slice(0, count).join(' ');
            $spce.css({
                '-moz-transform': trsfmStep,
                '-o-transform': trsfmStep,
                '-webkit-transform': trsfmStep,
                'transform': trsfmStep
            });

            // Log in the console, just for fun
            console.log(trsfmStep);

        } else {
            // If you have iterated through all the transforms, clear interval
            window.clearInterval(timer);   
            console.log('Timer cleared.');
        }
    }, delay);
});