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旋轉 - 在鉻中重新啓動旋轉

回答

相關問題