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

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

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

4

1 回答 1

1

您不能.delay()用于 CSS 属性。相反，您可以尝试使用该setInterval()函数根据您想要的一组预定义转换逐步向您的元素添加转换。我在这里做了一个小提琴 - http://jsfiddle.net/teddyrised/5AqCm/

这个答案是在您最终想要缩放和倾斜元素的最终状态的假设下做出的。

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

$(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);
});

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

设置定时器，开始计数。每次达到间隔时，脚本都会检查您是否已经遍历了变换数组。如果不是，它将逐步添加变换，方法是从一开始就加入数组中的项目，但在您所处的任何一步停止（使用.slice()）方法:)

于 2013-04-17T09:27:49.237 回答