今、私はそれを設定するシンプルなボタンを持っていますマウスが押されるとアニメーションし、マウスが離されるとそのアニメーションの効果を反転します。アニメーションは、「top」、「left」、および「box-shadow」プロパティを変更します。 jquery "s .animate()関数が要素のbox-shadowに影響を与えることができるように、特別なjqueryプラグインを使用する必要がありました。参照しやすいように、ここにあります 私の現在の例のGitHubリポジトリ.
問題は、マウスボタンがすぐにリリースされると、アニメーションは完了し、その後で反転し続けます。望ましい効果は、マウスボタンを押したままにするか離すことによって、ボタンが「上」または「下」に移動するかどうかをユーザーが制御することです。見る この例 (右側の最後のボックス)で、私が達成したいことのアイデアを得ることができます。
これまでの研究では、バインディング/アンバインディングを使用してこれを達成する必要があるようですが、「見た」例では、アニメーションが完了する前に停止することを扱っていませんでした。
回答:
回答№1は1jQueryを使用してものをアニメーション化しているため、
.stop()を使用して、
一致した要素で現在実行中のアニメーションを停止します。
または
.finish()を使用して
現在実行中のアニメーションを停止し、キューにあるすべてのアニメーションを削除し、一致した要素のすべてのアニメーションを完了します。
その後、アニメーションが停止したときに要素の元の値に戻すことができます。