あなたの問題は、ドキュメントの次の文で説明されています(fadeOut):
複数の要素がアニメーション化されている場合、コールバックは、アニメーション全体に対して 1 回ではなく、一致した要素ごとに 1 回実行されることに注意してください。
つまり、2 つのものをアニメートしているため、コールバックが 2 回呼び出されます。div の 1 つが既に非表示になっているため、 はfadeOut
即座に完了し*、すぐにコールバックします。
※既に表示・非表示があれば即完了は、表示・非表示型のヘルパー関数ならでは。独自のフェード アニメーションを作成した場合、現在の状態に関係なく、常に指定された時間がかかります。
これはいくつかの方法で修正できます。fadeOut()
最も簡単な方法は、両方の要素で 1 つを呼び出すのではなく、呼び出しを相互に連鎖させることです。
$('.icon_one').click(function() {
$('#image_two').fadeOut(function() {
$('#image_three').fadeOut(function() {
$('#image_one').fadeIn();
});
});
});
通常、一方はすでに隠れているため、すぐに抜けますが、もう一方は時間がかかります。いずれにせよ、両方が完了して初めてフェードインが発生します。
デモ: http://jsfiddle.net/jtbowden/XQnhs/
もちろん、HTML を少し変更すれば、1 つのクリック ハンドラーで 3 つすべてを実行できます。
<div id="image_one" class="imageBox" style="background-color:red;height:50px;width:50px"> </div>
<div id="image_two" class="imageBox" style="background-color:blue;height:50px;width:50px"> </div>
<div id="image_three" class="imageBox" style="background-color:yellow;height:50px;width:50px"> </div>
<div data-num="one" class="icon_show">Red</div>
<div data-num="two" class="icon_show">Blue</div>
<div data-num="three" class="icon_show">Yellow</div>
脚本:
$('.icon_show').click(function() {
var showID = '#image_' + $(this).data('num');
$('.imageBox:visible').fadeOut(function() {
$(showID).fadeIn(400);
});
});
デモ: http://jsfiddle.net/jtbowden/NAcPW/
重要なのは、クリックしたリンクに基づいて、どれを表示するかを自動的に判断することです。この場合、データ属性に数値を格納することでそれを行います。ID の一部を使用することも、 を使用してオフセットを計算し、index
それを にフィードすることによっても実行できeq
ます。
デモ: http://jsfiddle.net/jtbowden/NnN58/
このコードを単純化する方法はたくさんあります。