Question

我需要旋转div一次，我厌倦了使用这段代码

$.fn.rotate = function () {
var self = $(this);    

for (var degree = 0; degree <= 360; degree++){
    self.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
    self.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
    self.css({ 'transform': 'rotate(' + degree + 'deg)'}); 
}
};

$("img").rotate();

但它根本不起作用。怎么了？如何在工作中？

UPD 我找到了解决方案，它可以工作

$.fn.rotate = function () {
var self = $(this),   
degree = 0;
 var interval = setInterval(function () {
    self.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
    self.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
    self.css({ 'transform': 'rotate(' + degree + 'deg)'});
     degree++;
     if (degree === 360) {
            clearInterval(interval);
        }
    }, 5);
};

$("img").rotate();

http://jsfiddle.net/eaQRx/2086/

Answer 1

我的解决方案：

$.fn.clockwiseRotate = function () {
$(this).each(function () {
    var self = $(this),
        degree = 0;
    var interval = setInterval(function () {
        self.css({
            '-webkit-transform': 'rotate(' + degree + 'deg)'
        });
        self.css({
            '-moz-transform': 'rotate(' + degree + 'deg)'
        });
        self.css({
            'transform': 'rotate(' + degree + 'deg)'
        });
        degree++;
        if (degree === 361) {
            clearInterval(interval);
        }
    }, 1);
});
};

$.fn.counterclockwiseRotate = function () {
    $(this).each(function () {
        var self = $(this),
            degree = 360;
        var interval = setInterval(function () {
            self.css({
                '-webkit-transform': 'rotate(' + degree + 'deg)'
            });
            self.css({
                '-moz-transform': 'rotate(' + degree + 'deg)'
            });
            self.css({
                'transform': 'rotate(' + degree + 'deg)'
            });
            degree--;
            if (degree === -1) {
                clearInterval(interval);
            }
        }, 1);
    });
};
$('img:first-child').clockwiseRotate();
$('img:last-child').counterclockwiseRotate();

http://jsfiddle.net/eaQRx/2100/

使用jQuery旋转div

1 个答案: