Question

我有旋转图像的功能

$.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 === 360) {
            clearInterval(interval);
        }
    }, 1);
});
};

http://jsfiddle.net/eaQRx/2093/

但我不仅要旋转，还要在从0旋转到1时缩放图像设置fo image css
transform: scale(0);
并将其更改为
transform: scale(1);

有没有办法创建两个功能并同时使用它们，一个用于旋转，另一个用于比例，或者，我不知道，还有其他任何解决方案吗？

Answer 1

DEMO

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

jQuery同时旋转并增加图像

1 个答案: