2

我试图定位一个隐藏的 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");

如果我将 CSS forleft和topinto 放置var cssObj，它会很好地旋转它。但是，我需要将其定位，然后设置为可见，然后使用动画进行旋转。

我怎样才能做到这一点？

4

1 回答 1

2

检查这个问题，它是接受的答案。jQueryanimate不能为非数字属性设置动画，这rotate(...)就是不支持使用 as 值的原因。但是您可以使用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- 所以它仅在元素完成显示后才开始旋转。

这个小提琴是通过合并您的代码和其他问题的答案中提供的示例代码而创建的（并且还扩展为支持其他浏览器）。您需要对其进行调整，以便从源度数到目标度数进行旋转（使用变量startDegree和endDegree）。

于 2013-03-03T01:11:57.480 回答