Question

$(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属性，但是这里只做skew.I我想为下一个提供20秒的延迟声明，但还有其他简单的方法吗？感谢

Answer 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()）方法：）

转换属性jquery

1 个答案: