使用jQuery設置CSS變換動畫

我正在試圖爲div創建動畫，並讓它圍繞y軸旋轉180度。當我把下面的代碼，我得到一個jQuery錯誤：使用jQuery設置CSS變換動畫

$("#my_div").animate({ 
     "transform": "rotateY(180deg)", 
     "-webkit-transform": "rotateY(180deg)", 
     "-moz-transform": "rotateY(180deg)" 
    }, 500, function() { 
     // Callback stuff here 
    }); 
});

它說：「遺漏的類型錯誤：無法讀取屬性‘默認視圖’的未定義的」，並說這是在jQuery的文件本身......我在做什麼錯？

來源

2012-06-10 Joey

試試這個：

$('#myDiv').animate({ textIndent: 0 }, { 
    step: function(go) { 
     $(this).css('-moz-transform','rotate('+go+'deg)'); 
     $(this).css('-webkit-transform','rotate('+go+'deg)'); 
     $(this).css('-o-transform','rotate('+go+'deg)'); 
     $(this).css('transform','rotate('+go+'deg)'); 
    }, 
    duration: 500, 
    complete: function(){ alert('done') } 
});

http://jsfiddle.net/RPSzb/2/

來源

2012-06-10 04:24:45 undefined

感謝，我最終得到了一個名爲交通的插件，因爲它是做似乎#D旋轉的唯一途徑... – Joey

您也可以預定義旋轉的CSS類，並使用jQuery添加/刪除類：

CSS：

#my_div { 
    -moz-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    -webkit-transition: all 500ms ease; 
    transition: all 500ms ease; 
} 
.rotate { 
    -moz-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg); 
}

jQuery：

$("#my_div").addClass('rotate');

來源

2013-11-26 11:03:07

jQuery不能動畫變換屬性開箱即可。但是你可以用.animate()動畫自定義屬性和「手動」做改造使用step function：

var $myDiv = $("#my_div"), 
    ccCustomPropName = $.camelCase('custom-animation-degree'); 
$myDiv[0][ccCustomPropName ] = 0; // Set starting value 
$myDiv.animate({ccCustomPropName : 180}, 
    { 
     duration: 500, 
     step: function(value, fx) { 
      if (fx.prop === ccCustomPropName) { 
       $myDiv.css('transform', 'rotateY('+value+'deg)'); 
       // jQuery will add vendor prefixes for us 
      } 
     }, 
     complete: function() { 
      // Callback stuff here 
     } 
    });

的工作示例見this fiddle（點擊藍色方框）。

這與undefined's answer類似，但它並未濫用真正的CSS屬性。

注：自定義屬性的名稱應該是一個jQuery.camelCase()名字，因爲.animate()使用駝峯格式名稱內部，因此，將存儲使用駝峯格式名稱的屬性的當前值和fx.prop也將是駝峯格式名稱。

來源

2014-02-16 20:10:40 Ignitor

忘掉jQuery的$.animate()，改爲使用$.velocity()。 Velocity.js是jQuery的動畫擴展。它使用與jQuery相同的語法，並允許您對CSS3進行動畫處理，例如3D變換，平移，旋轉，顏色漸變，轉換，傾斜，......任何你想要的。而且，由於它足夠聰明，可以使用CSS3而不是JS，所以它的動畫效果也很好。我不明白爲什麼jQuery不這樣做！

http://julian.com/research/velocity/

來源

2015-01-20 22:41:43

使用jQuery設置CSS變換動畫

回答

相關問題