ここでプラグインのデモを使用して、トランジションのあるアニメーションをいくつか実行しています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() を見ていましたが、ほとんど役に立ちませんでした。
誰かが私のためにこれに光を当てていますか?