d.promise()でなくてもanimate()はpromise()を返すのでそのままreturnでよかったです。CSSアニメーションやjQueryアニメーション、さらにそれ以外の様々な動作を順番に実行するような処理を実装したいと思い、Deferredによる実装方法を試してみました。順番に動作させるためには「処理が完了した」ということを判定しないといけません。CSSアニメーションは完了時にtransitionendというイベントが発火します。※keyframeアニメーションの場合はanimationendというイベントになります。このイベントに対してresolve()をバインドさせれば、Deferredにより連鎖的な処理を実装できそうです。ちなみにjQueryのみの場合jQueryアニメーションだけの場合はDeferredを使うことで簡単に実装できます。́∀`)jQuery.Deferredでわかりやすく順番にアニメーションする方法CSSアニメーション終了時にpromise()を返すTransitionEndイベントはCSSアニメーション終了時に発火します(実装時にはベンダープレフィックスが必要です)。このイベントにresolve()をバインドすることで、CSSアニメーション終了を伝達します。d.promise();}これでthen()やwhen()など、jQuery.Deferredに関連する関数を使った処理が構築できます。jQueryアニメーション終了時にpromise()を返すCSSアニメーションと同じようなかたちで、アニメーション完了時にresolve()をバインドします。function(){/*animate()はpromise()を返すのでそのままreturnでよかった...。'0s'},'1000','linear');}デモデモはこちらデモでは1.CSSアニメーションで右に300px移動2.CSSアニメーションで下に100px移動3.jQueryアニメーションで左に200px移動4.1秒静止し、色を#00fに変える。5.CSSアニメーションで下に100px移動という処理を順番に行っています。アニメーション以外にsetTimeoutによる遅延処理(非同期なのでDeferredを使わないと次の処理が実行されてしまう)も加えました。jQueryアニメーションを伴って表示させるといった感じで使えたらいいな、と思います。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイトCommentsコメントはまだありません。2Archive2020年92019年182018年102017年172016年202015年212014年312013年552012年50SearchSocialAboutWeb制作会社ではたらく社畜のアウトプットです。Web制作技術のほか、雑記など。当ブログと運営者についてもっと詳しく見るプライバシーポリシーContactお問い合わせは下記フォームをご利用ください。お時間がございましたらお問い合わせの前にこちらをご一読いただけますと幸いです。Wood-Roots:blog。