VSCode のキーバインドの変更方法
変更方法
VSCode のキーバインドは、コマンドパレットから Preferences Open Keyboard Shortcuts を実行し開いた Keyboard Shortcuts 画面から変更することができます。
詳細は次のページに書かれています。
どのキーバインドが変更したいキーバインドかわからない場合
Ctrl+n や Ctrl+p でリストを上下させたい場合など変更したい特定の動作を Keyboard Shortcuts 画面で検索しようとしても複数のキーバインドがヒットし
どれを変更してわからないことがあります。
そういう場合は、コマンドパレットから Developer: Toggle Keyboard Shortcuts Troubleshooting を実行します。
その後、特定の動作 をすると Output View にその時、動作したキーバインドが表示されます。
その情報をもとに、Keyboard Shortcuts 画面で検索しキーバインドを変更すると良いです。
キーバインドの When に設定する値がわからない場合
When には Context を指定します。具体的には次のページに書かれている Context name を設定します。
jQuery の fadeIn を使用したアニメーションとコールバック（サンプル付き）
Y さんから質問がありました。
「ふわっと画像が出てくるようにしたい。ふわっと。」
jQuery の fadeIn を使用すると簡単にできると思います。
.fadeIn() | jQuery API Documentation
ポイントは 2 つです。
- ふわっとしたい対象の要素のスタイルに
display: noneを指定し非表示にする - ふわっとしたい対象の要素をjQuery でセレクトして、
fadeInメソッドを呼び出す
サンプル
// JavaScript のみ抜粋
$(() => {
// fadeIn の引数はミリ秒。この時間をかけてふわっとする。
$("#red").fadeIn(1000);
$("#blue").fadeIn(1000);
$("#yellow").fadeIn(1000);
});上の図にマウスをホバーし、rerun することでもう一度動作します。
「ふわふわふわって、順番に出てきてほしい。」
2 つ方法があります。
- コールバック関数を指定して 1 つの表示完了を待ってから、次の要素を表示する方法
- 表示完了を待たずに、次の要素を表示する方法
まずは 1。ポイントは fadeIn の第 2 引数に指定するコールバック関数内で次のふわっとしたい要素の処理を呼び出すことです。ちなみに、「コールバック関数」とは特定の処理の終了を待って呼び出される関数のことです。
サンプル
// JavaScript のみ抜粋
$(() => {
$("#red").fadeIn(1000, () => {
// #red のコールバック関数内の処理
$("#blue").fadeIn(1000, () => {
// #blue のコールバック関数内の処理
$("#yellow").fadeIn(1000);
});
});
});上の図にマウスをホバーし、rerun することでもう一度動作します。
次に2です。ポイントは delay でふわっの開始を遅らせることです。
.delay() | jQuery API Documentation
サンプル
// JavaScript のみ抜粋
$(() => {
$("#red").fadeIn(1000);
// delay の引数はミリ秒。この時間分ふわっ（fadeIn）を遅らせる。
$("#blue").delay(200).fadeIn(1000);
$("#yellow").delay(400).fadeIn(1000);
});上の図にマウスをホバーし、rerun することでもう一度動作します。
