jqueryアニメイトで不透明度でアニメーション化します-jsチュートリアル-php.cn

Animating with Opacity in jQuery Animate

jqueryアニメイトで不透明度でアニメーション化します

キーテイクアウト

jquery.animeを使用してフェードインまたはフェードアウトする場合、インターネットエクスプローラーはフォントレンダリングの問題を引き起こす可能性があります。これを回避するには、jQueryの不透明度（「show」）または不透明度（「非表示」）ショートカットプロパティを使用するか、アニメーションが完了したらフィルターCSSプロパティを「なし」に設定します。
jQuery animateは背景画像の不透明度を直接変更することはできませんが、回避策には、背景画像の個別のdivを作成し、そのdivの不透明度をアニメーション化することが含まれます。これにより、他のコンテンツの不透明度に影響を与えることなく、背景画像の不透明度を変更できます。
jqueryの不透明度（「show」）または不透明度（「非表示」）のショートカットプロパティを使用して、IEの欠点を処理するショートカットプロパティ、またはアニメーションを完了したら、フィルターCSSプロパティを「なし」に設定します。 Fcl.tabsで不透明度を使用したことによって引き起こされていたタブのコンテンツで、巡航するためのフォントレンダリングの問題が発生したため、これに出会いました。その結果、Fcl.tabsにパッチを適用して、「0の代わりに不透明度の「ショー」および「非表示」プロパティを使用します。そして「1？問題は修正されています。

コードを修正

$tabContent<span>.css('opacity', 0);
</span>$tabContent<span>.animate(
</span><span>{
</span><span>opacity: 1
</span><span>}, 350);</span>

ログイン後にコピー

jquery animate

で不透明度をアニメーション化することについてよく尋ねる質問

$tabContent<span>.css('opacity', 'hide');
</span>$tabContent<span>.animate(
</span><span>{
</span><span>opacity: 'show'
</span><span>}, 350);</span>

ログイン後にコピー

jQueryアニメイトを使用して特定の不透明度に要素をフェードするにはどうすればよいですか？

JQuery Animateを使用して特定の不透明度に要素をフェードするには、要素を選択して.animate（）メソッドを使用する必要があります。 .Animate（）メソッドを使用すると、カスタムアニメーションを作成できます。アニメーション化するCSSプロパティとアニメーションの期間を指定できます。たとえば、2秒で50％の不透明度に要素をフェードするには、次のコードを使用します：

$（ "＃element"）。アニメート（{}、2000）;
このコードでは、「#ELEMENT」はあなたがアニメーションのIDを設定したいです。アニメーションの2秒まで。

jQuery fadeto（）？

jqueryのfadeto（）とanimate（）メソッドの両方のjqueryを使用して、要素の不透明度を変更することができます。 2つの主な違いは、Fadeto（）が不透明度を変えるように特別に設計されていることですが、Animate（）はあらゆるCSSプロパティをアニメーション化できるより一般的な関数です。たとえば、2秒間で要素を50％の不透明度にフェードするには、次のコードを使用します。

$（ "＃element"）。Fadeto（2000、0.5）;
Animate（）メソッドを使用して、複数のCSSプロパティを一度にアニメーション化できます。各プロパティ値ペアがCSSプロパティとその最終値を表す引数としてオブジェクトを取得します。たとえば、要素の不透明度と幅の両方をアニメーション化するには、次のコードを使用します：

$（ "＃要素"）。アニメート（{
>
width： "50％"
}、2000）;元のサイズの50％に、「2000」はアニメーションの持続時間を2秒に設定します。 Hover（）メソッドは引数として2つの関数を取ります。1つはマウスが要素に入るときに実行し、1つは要素を離れるときに1つを実行します。たとえば、マウスがそれを覆うと、マウスが100％不透明になると、マウスが50％不透明度にフェードします。 function（）{
$（this）.animate（{opacity：0.5}、2000）;
}、
function（）{

$（this）.anime（{ofacity：1}、2000）;

}

）;マウスが要素に入ると、最終的な不透明度「Opacity：1」は、マウスが要素を離れると最終不透明度を100％に設定し、「2000」は各アニメーションの持続時間を2秒に設定します。

jQuery animateを使用して要素を継続的にフェードアウトしますか？

はい、jquery animateを使用して要素を連続的にフェードアウトします。これを行うには、要素をフェードアウトするカスタム関数を作成し、アニメーションが完了したときにそれ自体を呼び出して要素をフェードインします。これにより、ページが更新されるか、機能が停止するまで続くループが作成されます。 2000、function（）{
$（this）.animate（{opacity：1}、2000、fadeinout）;
}）;
}

fadeinout（）;
「2000」は各アニメーションの持続時間を2秒に設定し、「Fadeinout」は各アニメーションが完了したときに呼び出される関数の名前です。 stop（）メソッドは、選択した要素で現在実行されているアニメーションを停止します。たとえば、ID「要素」を使用して要素のアニメーションを停止するには、次のコードを使用します。要素上のすべてのアニメーションを停止したい場合は、stop（）メソッドへの最初の引数としてtrueを渡すことができます：

$（ "＃要素"） jQueryアニメート。 CSSの不透明なプロパティは、背景画像だけでなく、要素全体に適用されます。これは、要素の不透明度をアニメーション化すると、そのコンテンツ（テキストと子の要素を含む）もすべて透明になることを意味します。ただし、

が回避策があります。背景画像用に個別のDIVを作成し、そのDivの不透明度をアニメーション化できます。このように、他のコンテンツの不透明度に影響を与えることなく、背景画像の不透明度を変更できます。

これを行う方法の例は次のとおりです。 url（ 'your-image.jpg'）;

}

#content {
position：relative;
>}
$（ "＃background"）。「不透明度：0.5」は最終的な不透明度を50％に設定し、「2000」はアニメーションの持続時間を2秒に設定します。

jQueryアニメートを使用して特定の期間にわたって特定の不透明度に要素をフェードするにはどうすればよいですか？

JQuery Animateを使用して特定の持続時間にわたって特定の不透明度に要素をフェードするには、要素を選択して.animate（）メソッドを使用する必要があります。 .Animate（）メソッドを使用すると、カスタムアニメーションを作成できます。アニメーション化するCSSプロパティ、そのプロパティの最終的な値、アニメーションの期間を指定できます。たとえば、5秒間で50％の不透明度に要素をフェードするには、次のコードを使用します。アニメーション化する要素のIDは、「Opacity：0.5」は最終不透明度を50％に設定し、「5000」はアニメーションの持続時間を5秒に設定します。これを行うには、アニメーション化するすべての要素を選択し、.animate（）メソッドを使用する必要があります。 .animate（）メソッドは、選択した各要素にアニメーションを適用します。たとえば、クラスですべての要素を2秒間「フェード」して50％の不透明度にフェードするために、次のコードを使用します。アニメーション化する要素「Opacity：0.5」は最終不透明度を50％に設定し、「2000」はアニメーションの持続時間を2秒に設定します。 .Animate（）メソッドは2回連続で。最初の.Animate（）メソッドは特定の不透明度に要素をフェードし、2番目の.Animate（）メソッドは元の不透明度に戻します。たとえば、要素を50％不透明度にフェードし、それぞれ2秒間で100％不透明度に戻り、次のコードを使用します。 2000）。秒。

ボタンをクリックしたときにjquery animateを使用して特定の不透明度に要素をフェードできますか？

はい、jqueryアニメイトを使用して、ボタンをクリックしたときに特定の不透明度に要素をフェードできます。これを行うには、ボタンを選択し、.click（）メソッドを使用する必要があります。 .click（）メソッドは、ボタンをクリックしたときに実行される引数として関数を取ります。たとえば、ID「ボタン」がクリックされたボタンを使用すると、50％の不透明度に要素をフェードします。 0.5
}、2000）;
}

以上がjqueryアニメイトで不透明度でアニメーション化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。