变换属性jquery

Transform property jquery

本文关键字：jquery 属性 变换      更新时间：2023-09-26
$(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秒运行，然后skew属性在接下来的20秒运行，但这里它只运行倾斜。我想为下一个语句提供20秒的延迟，但是有其他简单的方法吗?由于

不能使用.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);
});

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

设置定时器，开始计数。每次达到一个间隔时，脚本都会检查您是否已经遍历了转换数组。如果没有，它将通过从开始连接数组中的项来应用变换的逐步添加，但在您所处的任何步骤(使用.slice())方法停止:)

相关文章：