Question

我正在尝试定位一个隐藏的div，然后显示它，然后用一些动画旋转它。

这是我到目前为止所得到的，似乎根本没有旋转......

$(this).css({ 'left' : randomNum(offsetStartX, offsetEndX),
    'top' : randomNum(offsetStartY, offsetEndY) });
$(this).show("fast");
var cssObj = {
    msTransform: 'rotate(\'+ rotDegrees + \'deg)',
    '-moz-transform' : 'rotate(\'+ rotDegrees + \'deg)',
    '-webkit-transform' : 'rotate(\'+ rotDegrees + \'deg)',
    '-o-transform' : 'rotate(\'+ rotDegrees + \'deg)',
    'transform' : 'rotate(\'+ rotDegrees + \'deg)' };
$(this).animate(cssObj, "slow");

如果我将left和top的CSS放入var cssObj，它会将其旋转得很好。但是，我需要将它定位，然后设置为可见，然后用动画旋转。

我该怎么做？

Answer 1

检查this question，然后accepted answer。 jQuery animate无法为非数字属性设置动画，这就是为什么不支持使用rotate(...)作为值的原因。但您可以使用step（为任意值设置动画，并在每一步设置不同的旋转）。

$(this).show("fast",function() { 
    var element = $(this);
    var startDegree = 90;
    var endDegree = 0;
    $({ i:startDegree }).animate({ i: endDegree }, {
        step: function(now,fx) {
            var cssObj = {
                msTransform: 'rotate('+ now + 'deg)',
                '-moz-transform' : 'rotate('+ now + 'deg)',
                '-webkit-transform' : 'rotate('+ now + 'deg)',
                '-o-transform' : 'rotate('+ now + 'deg)',
                'transform' : 'rotate('+ now + 'deg)' };
            element.css(cssObj); 
        },
        duration:500
    },'linear');
});

请注意，我在回调到show时启动了旋转动画 - 所以它只在元素完成显示后才开始旋转。

This fiddle创建了合并代码和其他问题答案中提供的示例代码（并扩展为支持其他浏览器）。您需要对其进行调整，以便从源程度到目标程度进行旋转（使用变量startDegree和endDegree）。

jQuery - 定位元素，显示它，然后为它设置动画

1 个答案: