問題

jQueryを使っているシステムで、無限ループのアニメーションを作る必要が生じました。

Reactであればreact-springを使ってサクッと実装するところだが、jQueryではどう対処すればいいのでしょうか？

解決策

jQueryでは.animate()というメソッドが用意されていて、これを 使って一種の無限ループを作る形でなんとかするしかないようです。

(なお、本記事の執筆日時2023/09/06時点では、最新バージョンは v3.7.1のようです。）

こちらのStack Overflow 記事では、.animateのコールバックを連発して表現しているようですが、流石に不恰好なので微妙に調整します。

実装としては以下のように、最初のアニメーションが終了したところをcallbackで補足　→ 次のアニメーションを動かし、callbackで補足 → ...　ということで無限ループを作りました。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"
			integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<div id="moving-button">
	I'm moving!
</div>

<style>
	#moving-button {
		width: 400px;
		font-size: 2rem;
		padding: 10px 20px;
		text-align: center;
		border-radius: 20px;
		background: blue;
		color: white;
	}
</style>

<script>
	$(function() {

		function animate(obj, direction) {
			let animateArray = {}
			if (direction == 0) {
				animateArray = {
					opacity: 0.5,
					fontSize: "2rem",
					padding: '10px 20px',
					borderRadius: '20px'
				}
			} else {
				animateArray = {
					opacity: 1,
					fontSize: "4em",
					padding: '20px 40px',
					borderRadius: '40px'
				}
			}
			obj.animate(
				animateArray,
				500, // duration
				'swing', // type
				function() { // callback fired when complete animation
					direction = direction == 0 ? 1 : 0 // アニメーションの向きを反転
					animate(obj, direction)
				}
			)
		}

		// fired at first
		animate($('#moving-button'), 0)
	})
</script>

こんな感じにできました。

まとめ

animate()の第1引数はcssを指定できるようなので、さまざまな表現をお手軽に行うことが可能となっています。

詳しくは以下の公式ドキュメントをご確認ください。

この記事が何かのお役に立てれば幸いです。
最後までお読みいただきありがとうございました！