JQuery旋转 - 在铬中重新启动旋转

我有一个圆形图像，它可以在页面加载时旋转，并停止并在鼠标悬停/启动时启动。该圆也是可拖动的，以便我可以手动旋转它。这在Mozilla中运行良好，但在Chrome中效果不佳。问题是它不会在mouseout上重新启动rotateCircle();。任何人都可以帮助找出这是为什么？我正在使用jQueryRotate和Greensock Draggable。JQuery旋转 - 在铬中重新启动旋转

$(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>

来源

2014-12-02 LeeTee

其主要是因为你使用2个库来旋转相同的元素，所以在铬中GreenSock使用css3转换属性和jQuery旋转使用-webkit转换属性 – 2014-12-02 17:07:24

好的。任何解决方案的想法？我需要两个图书馆，因为他们都做不同的事情。谢谢 – LeeTee 2014-12-02 17:25:32

这里是我如何使用jQuery中转，矢量数学和livescript http://codepen.io/furqanZafar/pen/myeXPo – 2014-12-02 18:16:25

更简单的方法是将rotateBy方法添加到使用GreenSock可拖动类。

这里是更新的可拖动类： 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(); 
}

下面是两个镀铬的作品& 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(); 
    }); 

});

来源

2014-12-03 15:02:07

得到这个工作，它的伟大，非常感谢！ – LeeTee 2014-12-04 19:43:34

我不太明白为什么需要Javascript 为了这？

http://jsfiddle.net/nmmkLpqo/（例如只对铬，增加供应商的前缀FX等）

img { 
    border-radius: 50%; 
    -webkit-animation: rotation 5s linear infinite; 
} 
img:hover { 
    -webkit-animation-play-state: paused; 
} 
@-webkit-keyframes rotation { 
    from { 
     -webkit-transform: rotate(0deg); 
    } 

    to { 
     -webkit-transform: rotate(360deg); 
    } 
}

这应该做的完全一样的？

来源

2014-12-03 15:18:19 dave

我会用，如果我没有使用可拖动的插件，谢谢 – LeeTee 2014-12-04 19:46:52

JQuery旋转 - 在铬中重新启动旋转

回答

相关问题