マウスがボタンの上にマウスを置いて移動する場合、アニメーションがリセットされます

Question

私はウェブ開発に新しく、これに対する解決策を見当たりませんでした。 私は小さなウェブサイトを作成しました。マウスを置くと絵が滑り落ちながら滑り落ち、単語から離れるとスライドして消えます。

問題は、単語の上にマウスを置くとアニメーションが実行されても、単語の上にマウスを置いたままマウスを少し動かすと、アニメーションが逆転するということです。 それで基本的に、私は言葉にして、絵が滑り落ち、少し動く（しかしそれでもなお）、絵が元に戻る。 これは、単語の上にマウスを動かすと、この奇妙な動きが絵に現れ、単語が外れるまで数回上下します。

私は同じようなものの簡単な例が大好きです。単語をマウスで動かしている間は、アニメーションには影響しません。また、マウスが完全にオフの場合にのみ反転します。

ご不明の点がありましたら、お気軽にお問い合わせください。

$("#element").mouseover(function() { 
     //Animate in 
    }); 
    $("#element").mouseleave(function() { 
     //Animate out 
     }); 

のCss（CSSであまりにも安定していないが、私はあなたがこのような何かを行うことができると思います）：

Answer 1

あなたはこれを行うことが

が

.object{ 
top:0; 
animation-duration: 4s; 
} 
    .element:hover ~ .object{ 
    top:50px; 

}