Javascript动画在jQuery中使用transform.js

Question

我正在执行一些动画与过渡使用插件演示这里http://www.binpress.com/app/demo/app/145

然而，我在同一个元素上使用了多个过渡。

基本上我有一个动画，有5个圆圈作为卫星对象围绕一个中心点工作。中心点有一个小箭头，当你将鼠标悬停在任何卫星点上时，它会使用这个插件转换为正在悬停的卫星圆。

这是我正在做的一个简单的例子。

jQuery(".applications").bind('mouseover', function(){
    console.log('fired the second animation');  
    jQuery(".midpointer").animate({
        transform: 'rotate(190deg)'
    }); 
});

jQuery(".hosting").bind('mouseover', function(){
    console.log('fired the second animation');  
    jQuery(".midpointer").animate({
        transform: 'rotate(190deg)'
    }); 
});

现在的问题是，在第一个动画之后，任何后续的悬停都不会旋转元素。所以我假设我需要做某种形式的重置，我一直在看。stop()在jQuery中，但收效甚微。

有人能给我解释一下吗?

Answer 1

我认为每次鼠标移动时，从起始位置旋转190度，而不是相对于对象的当前旋转。根据文档，您可以使用+=来添加当前旋转:transform: '+=rotate(190deg)'