0

私はいくつかの異なる方法でこの問題に対処しようとしましたが、これまでのところ、適切に機能する解決策を見つけていません。次の条件で .fadeIn と .fadeOut をアニメーション化したい:

1) マウスオーバーで (スパン内にある) テキストと画像を徐々にフェードインする
2) 次のアニメーションに進む前にフェードインアニメーション
を完了する 3) マウスを離すと、テキストと画像を徐々にフェードアウトする
4) 次のアニメーションに進む前にフェードアウトアニメーションを完了する
5) アニメーションスムーズに実行し、キューに入れるべきではありません

これが私がこれまでに持っているものです：

$(document).ready(function() {

$("a").mouseover(function () { 
$("span.imtx").dequeue().fadeIn(3000, "swing", " ");
});

$("a").mouseleave(function () { 
$("span.imtx").fadeOut(3000, "swing", " ");
}); 
});

これまでのところ、上記のコードは私が望むものに最も近いものになっているので、可能な限り小さな変更を保存することに固執しています。とはいえ、フェードが発生する場合と発生しない場合があります。また、多数のマウスオーバーやマウスリーブでぎくしゃくすることもあります。私は開発に FF 6.0 を使用していますが、すべての主要なブラウザー (FF6、IE8、Google Chrome) で動作させるにはこれが必要です。jQuery/JavaScript を使ってまだ 1 か月しか経っていないので、回答の際はそのことを考慮してください。私にとってはまったく直感的な言語ではありませんが、学習しながら学んでいます。

さて、質問ですが、助けを求める嘆願です: Ralf Stoltze の hoverFlow プラグインまたは Brian Cherne の hoverIntent プラグインを組み込んで、フェードインとフェードアウトのアニメーションが適切に実行されるようにしたいと考えています。私は自分の試みを投稿しますが、これまでのところうまくいきませんでした。ここにいる誰かがこれらのプラグインのいずれかに精通していますか?上記のコードでそれらを動作させるのを手伝ってくれませんか?

4

1 に答える 1

0

フェードインまたはフェードアウトを使用すると、本質的に表示プロパティが変更されます。したがって、どちらか一方が終了せず、2 番目のエフェクトを実行すると、オブジェクトには適切なプロパティがなくなります jQuery はエフェクトを実行する必要があるため、時間を短縮し、 /または、dequeue() の代わりに stop() を追加します。このhttp://jsfiddle.net/yAupq/を試してみたい場合は、fadeTo を使用しています。これは、マウスが突然出入りしても、オンとオフを繰り返しても壊れません。エフェクトは、最後の状態から開始して現在のイベントに対して継続し、マウスがオブジェクトに出入りするたびにキューに追加されず、それらのエフェクトを次々に実行します...

于 2011-08-22T21:23:30.363 に答える