Transform屬性的jQuery

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

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

使用上述Jquery的，我需要的縮放屬性爲前20秒，然後斜屬性接下去的20秒運行，但在這裏它不僅skew.I想提供一個延遲20秒爲下一個聲明，但有沒有其他簡單的方法來做到這一點？謝謝Transform屬性的jQuery

來源

2013-04-17 niko

use delay（）http：// api.jquery.com/delay/ – dreamweiver

這是因爲你在歪斜的情況下壓倒比例。 – Terry

@dreamweiver謝謝我一直在嘗試的語法，但無法弄清楚。你能不能讓我知道它的語法。謝謝。（'＃space'）。css（{'webkit-transform'：'skew（30deg，20deg）'， }）。delay（2000）;？對？ – niko

對於CSS屬性，您不能使用.delay()。相反，您可以嘗試使用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-17 09:27:49 Terry

我正在刪除我的答案，我不確定延遲是否可以在CSS上工作。 – AurA

Transform屬性的jQuery

回答

相關問題