jQuery フェード要素を使用して効果をより鮮やかにします_jquery

より鮮やかな効果を実現するには、要素をフェードアウトまたはフェードインすることができます。どちらの場合も、時間の経過とともに要素の透明度を変更するだけです。 jQuery はフェードインとフェードアウトに関連する 3 つの関数を提供します:

·fadeIn() は、非表示の要素をビューにフェードインさせます。まず、要素が占めるスペースがページ上に表示されます (これは、ページ上の他の要素が移動することを意味する場合があります)。その後、要素が徐々に表示されるようになります。要素がすでにページ上に表示されている場合、この関数は効果がありません。速度値が指定されていない場合、要素は「通常」設定 (400 ミリ秒) を使用してフェードインします。

·fadeOut() は、表示されている要素を幽霊のようにフェードアウトさせて非表示にします。要素がページ上ですでに非表示になっている場合、この関数は fadeIn() 関数と同様に効果がありません。速度値が指定されていない場合、要素は 400 ミリ秒でフェードアウトします。

·fadeToggle() は、フェードイン効果とフェードアウト効果を組み合わせます。要素が現在非表示の場合はビューにフェードインし、現在表示されている場合はビューからフェードアウトします。この機能を使用すると、ツールチップをページ上に表示したり、ページから非表示にしたりできます。たとえば、「手順」という単語を表示するボタンがあるとします。訪問者がボタンをクリックすると、説明を含む div が表示され、もう一度ボタンをクリックすると、説明が表示されなくなります。プロンプト ボックスを 0.5 秒ごとにフェードインまたはフェードアウトするには、次のようなコードを記述します:

$('#button').click(function(){
$('#instructions').fadeToggle(500);
})；//end click

・fadeTo() の動作方法は、他の 2 つのエフェクト関数とは少し異なります。画像を一定の透明度までフェードさせます。たとえば、画像をフェードさせて半透明にすることができます。他のエフェクトとは異なり、速度値を指定する必要があります。さらに、要素の透明度を表すために 0 から 1 までの値が提供されます。たとえば、すべての段落を 75% の透明度にフェードするには、次のようなコードを記述できます:

$('p').fadeTo('normal'，.75);

この関数は、要素が表示されるか非表示になるかに関係なく、要素の透明度を変更します。たとえば、現在非表示になっている要素を 50% の透明度までフェードさせたいとします。その後、show() または fadeIn() を使用して要素を表示すると、50% の透明度で表示されます。同様に、半透明の要素を非表示にしてから表示すると、その透明度の設定が復元されます。