0

我正在使用此处演示的插件执行一些带有过渡的动画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() 但收效甚微。

有人为我阐明了这一点吗？

4

1 回答 1

0

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

于 2011-12-15T12:08:07.983 回答