javascript - JQuery 旋转 - 在 Chrome 中重新启动旋转

Question

我有一个圆形图像，它在页面加载时旋转，并在鼠标悬停/移出时停止和启动。该圆圈也是可拖动的，以便我可以手动旋转它。这一切在 Mozilla 中都工作得很好，但在 Chrome 中却不太好用。问题是它不会在鼠标移开时重新启动 rotateCircle(); 。谁能帮忙找出这是为什么吗？我为此使用 jQueryRotate 和 Greensock Draggable 。

$(function() {

    var angle = 0;
    var int;
    rotateCircle();

    function rotateCircle() {
        int = setInterval(function() {
            angle += 3;
            $("#circle").rotate(angle);
        }, 100);
    }           

    $("#circle").mouseover(function() {
        clearInterval(int);
        Draggable.create("#circle", {type:"rotation",throwProps:true});
    }).mouseout(function() {
       rotateCircle();
    });



});


</script>

Answer 1

更简单的方法是向GreenSock Draggable 类添加rotateBy 方法。

这是更新后的 Draggable 类: https://raw.githubusercontent.com/furqanZafar/GreenSock-JS/master/src/uncompressed/utils/Draggable.js

我只在 Draggable.js 中添加了以下方法:

this.rotateBy = function(amount) {
    self.rotation += amount;
    self.x = self.rotation;
    dirty = true;
    render();
}

这是使用新的 Draggable 类在 chrome 和 ff 上运行的 jsfiddle:http://jsfiddle.net/58rauhsL/

$(function() {

    var draggable = Draggable.create("#circle", {type:"rotation",throwProps:true}), 
        interval;

    function rotateCircle() {
        interval = setInterval(function() {
            draggable[0].rotateBy(3);
        }, 100);
    }

    rotateCircle();

    $("#circle").mouseover(function() {
        clearInterval(interval);
    }).mouseout(function() {
        rotateCircle();
    });

});