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)'
    }); 
});

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

有人对我有任何启示吗？

Answer 1

我相信每次鼠标悬停时都会从起始位置旋转190度，而不是相对于对象的当前旋转。根据文档，您可以使用+=添加到当前轮换： transform: '+=rotate(190deg)'

使用transform.js在jQuery中使用Javascript动画

1 个答案: