お帰りなさい。
だから私が最初にJay
queeryを紹介したとき、それはselect要素がイベントリスナーでそれらを操作するようなことをするのに役立つと言いました。
また、エフェクトやアニメーションにも役立つと述べました。
このビデオでは、エフェクトに組み込まれているもののいくつかのクイックプレビューを行います。特に、フェーディングエフェクトとスライドの2つの広いカテゴリを示します。
だから、ここではジェイ・コーリーがエフェクトカテゴリに乗っています。
エフェクトとはかなり関係しているメソッドがあることがわかります。フェード効果を表示することから始めます。フェードアウトを開始して見ていきます。
フェードアウトとは、ドル記号や要素のセットを選択し、その要素をフェードアウトさせ、その要素を完全な不透明度から完全な透明度またはゼロの不透明度にアニメートします。
だから基本的に要素を消してしまい、遅くても速くても非常に遅くしたいのであれば、時間を与えることができます。
ミリ秒単位で指定することができます。
デフォルトは400ミリ秒です。最後に表示されるコールバックを提供することができます。
ここでは、このエフェクトスタディデモをデモンストレーションするために新しいファイルを作成します。最後のデモページから構造をコピーして、Jクエリー効果を呼び出します。
だから我々はそれを設定して、私はここでこのコンテンツをすべて取り除くつもりだし、次に私はいくつかのdivを追加するつもりです。
3つのdivを作って、これらのdivを使用してそれらを消してアニメーションし、上下にスライドさせましょう。
そして、私はこれらの最初のものの中にいくつかのコンテンツを与えるつもりです、これらは私を次のものにフェードしないでください。
私はあなたにお願いしています。
そして、最後に私たちはヘルプが助けになると言います。
だから、これらの部門は消え去られたくはない。
残念ながら、今日は幸運な日ではありません。
そして、私たちは彼らと戦うつもりです。
このことをより明確にするために、ここで私たちの生活にいくつかのスタイルを加えて、色が消えるようにします。
また、幅と高さもあり、上下にスライドできます。
だから私はすべてのdivを選択し、100ピクセルと100ピクセルの高さとティールの色の背景を与え、保存してみましょう。これを開くでしょう。
私たちには3つの部門があります。
しかし、私は彼らが同じ行にいてほしいです。
ですから、それを行う1つの方法は、フロートが残っていることです。
今、彼らはすべて同じ線にありますが、彼らはお互いに出血します。
だから我々はマージンを追加することができます。
だから、我々はすべての面で20ピクセルのマージンを行うだけです。
今度は3つの正方形で終わり、それぞれの中にテキストがいくつかあります。私たちがしようとしていることは、それらをどのようにフィットさせることができるのかを示すことなので、
そこで、ここにボタンを追加して、このボタンをクリックするだけです。
このボタンをクリックすると、アニメーションが実行されます。
だから私はこれをクリックして、これらの3つの項目がフェードアウトして開始するはずです。
したがって、フェードアウトを繰り返すには、要素を完全な不透明度から取得するか、すべての不透明度から要素を取得します。これは現在、完全な透明性の点まであります。
だから、この選択されたドットフェードアウトのように見えます。速度のオプションの文字列をゆっくりと高速に提供するか、または数ミリ秒を与えることができます。
それでは、今私にあなたを見せてください。
私は実際に別のファイルでこれを行うつもりですので、javascriptファイルを作成して保存します。
私はそれがちょうど天才に影響を及ぼし、私の警報が接続され、これを正確に底をつなぎ合わせて安全に保存していると呼ぶでしょう。
スクリプトタグを追加するだけです。
ソースは効果と等しい。
はい。
リフレッシュすると、接続アラートが表示されます。
だから私たちがここでやりたいことは、これらの部門を救済することです。
だから私たちはそのようなデバイスを選択し、フェードアウトしないようにする必要があります。
そして、私たちはスピードを提供するか、それをそのままにしておくことができます。
そして、それが私たちがやりたい、またはリフレッシュしたいことばかりで、ページが読み込まれると、それらが消えていくのを見ることができます。
実際にボタンをクリックすると、そのことが起こります。
だから、ドル記号のボタンドットをしたいと思っています。私たちはクリックをするか、ドットを素早く行い、コールバック関数を渡します。
だから、私たちがクリックすると、そのようなすべてのdivが消えて、今リフレッシュされます。クリックすると、すべてが消えます。
私が言及したように、ここでは1000秒のような数字をここに入力することができます。
私がリフレッシュすると、クリックすると表示されますが、フェードアウトするには完全な秒がかかります。
フェードアウトの重要なポイントは、私がここのページを調べて、要素を見るとdivがまだ寮にいるかのどちらかであることです。
彼らの表示がnoneに設定されているため、表示されません。
したがって、それらは削除されず、ページから削除されません。
それは単にそれらを隠しているだけです。
それは間違いなく重要な違いです。
それで、divが消えてしまったときにメッセージを印刷して消してしまい、ログを取り消したときに消えてしまったようなことをしたいとしましょう。
私がこれを実行すると、私はコンソールを開き、物事が起こる順序を見ます。
だから私がここをクリックすると、フェードが実際に行われる前にフェードが完了する。
ここで何が起こるかは、すべてのdivを選択してフェードアウトを開始することですが、それは完全な秒を要します。
そしてjavascriptは、次の行に移動する前にその秒が終わるのを待たない。
それはすぐにこの行に移動し、フェードアウトを印刷し、その後フェードアウトが終了します。
フェードアウトが終了した直後にコードを実行させたい場合は、ここでコールバックを渡すことができるようにしたいと考えています。
したがって、このコールバックはフェードアウトの内部で自動的に呼び出されます。
だから私は一定のログをそこに移動して保存します。
そして、私がリフレッシュして、今度はフェードアウトの終了をクリックすると、3つのフェードが完成しました。
領事館に文字列を印刷するだけでなく、より一般的なシナリオは、消してしまった要素を実際に削除することです。
だから私は彼らが実際に行っていない隠されていることに言及した。
そして、リストのように削除したい場合は、ゆっくりとフェードアウトしたいアイテムの横にあるゴミ箱をクリックしてビルドします。
しかし、DOMからページを完全に削除するだけです。
したがって、removeというメソッドを使用する必要があります。フェードアウトが終了した後に削除するだけです。
だから、これはちょうどこれを削除しますように見えます。
そしてこれが何をするかは、フェードアウトが終了するまで待つことです。
各divに対して、Removeメソッドが実行されます。
リフレッシュして、私をクリックしてください。
フェードアウトすると、要素に移動すると、現在はボタンだけしか表示されず、divのすべてが完全に消滅していることがわかります。
私がその行をコメントアウトしてリフレッシュすると、ここで3つのdivをどこから開始すればいいのかを知ることができます。
それらは消えて表示され、noneに設定されます。
だから私が間違った場所に自分のコードを入れて、ここでRemoveメソッドを実行したところ、すべてのdivsドットがそのように削除されました。
実際に起こるのは、注文が保証されていないということです。
そして、これは完全な秒を取るつもりです。
そして、このコードは、その秒が終わるのを待つことはありません。
だから、フェードアウトしてすぐに削除を実行します。
だから、このように見えるようになり、消え始めたらすぐ消えてしまいます。
基本的には全くフェードしません。
だからこそJ.
Coreyはこのコールバックを提供しています。なぜなら、何かを消したり、アニメーションが何かをスライドさせたりした後に、何かをしたいと思っているのはかなり一般的です。
それで私は私の次のポイントになります。これは私たちがやっていくことができる他のアニメーションのいくつかを示したいので、私たちは物事を消すこともできます。
だから、私がこのような最初にnoneになるようにディスプレイを設定すると、私はリフレッシュします。
私たちはdivを表示しません。なぜなら、クリックしたときにフェードアウトするのではなく隠されているからです。フェードインすることができます。期待どおりに動作します。
ボタンをクリックすると、1秒以上経過するとフェードインします。その後、コードが実行されていることがわかったときにコードを実行したい場合は、コードを入力してコールバックを行うことができます。
さあ、それはぼんやりしている。
GKは、FaidトグルとFaidトグルと同じように動作する1つのより良いフェードメソッドを提供します。
私は数ミリ秒を提供し、それが現在表示されているかどうかに応じて、何かをフェードインまたはフェードする必要があるかどうかを知るでしょう。
だから私がリフレッシュして、フェードトグルをクリックすると、それらをすべて送り込み、それらをすべてフェードアウトして戻すことによって開始されます。
基本的には、クラスリストにクラスを追加するか、フェードインまたはフェードアウトする必要があるかどうかを決定するJay
Querreyと一緒にトグルクラスを使用することです。
それで、私が実証しようとしている次の一連の効果が消えていくのは、これらのスライド効果です。
ここでは、スライドを下にスライドさせてスライドさせます。
だから、私はスライドダウンから始め、Faidのような要素に不透明度をアニメーション化するのではなく、現在表示されていない要素を取り除くことで、要素の高さを実際にアニメーション化します。
だから私はそれがどのように動作するかをお見せしましょう。
私たちはこれを変更しようとしています。
フェードトグルではなく、ただスライドします。
それは、リフレッシュするとエレメントが隠されるからです。
私がボタンをクリックしたときにスライドを実行すると、高さがアニメーションされ、同じことがスライドアップすることがわかります。
それは反対です。
だから私は彼らが表示されるように表示を取り除く場合。
そして今、ボタンをクリックします。
それらの高さはアニメートされ、上方向にスライドし、最後にNoneに設定されます。
そして、もう一つの方法は、それが何をすべきかを決めるところのフェードトグルのように機能するスライドトグルです。
だから私がクリックすると、それらがスライドして、今度はスライドして上下に戻る。
だからこそ、スライドを上にスライドさせてスライドトグルすることがあります。
彼らはFaidアナログメソッドと同じようなものでした。
私たちが渡すことができるオプションのコールバックもあります。
だから、1秒のような時間を与えてから、私のコールを戻すことができます。
そして私はちょうど別の罪を犯すでしょう。 最後のスライドでそのログが行われます。
そしてそれは完全な第2のスライドが終わったときにのみ印刷されます。
だから私はリフレッシュします。
コンソールを見てみましょう。彼らは私をクリックしてクリックします。スライドが完了すると、これが表示されます。
ここでも同じことが注目されています。
これは6に変更されます。
そこに行く。
しかし、やはりより一般的なパターンは、アイテムを外したり消したりしたときにアイテムを削除することです。削除したアイテムは削除することです。
そこでここをスライドさせるのに1秒かかると、ページから削除されます。
要素タブに行くと、そのボタンとスクリプトを除いて、私たちの体は空になります。
だからうまくいけば、彼らはあなたに、採石場での影響のいくつかがどのようになっているかを知ることができます。
これらは、はるかに一般的なフェージングとスライドです。
そして、私たちは、私たちが次のビデオで始めるリストアプリを行う代わりに、それらを使うつもりです。