3

問題は単純なものですが、私はそれを理解するのにかなりの時間を費やしています。非表示で始まる画像ギャラリーを保持するページに 8 つの div があります。ユーザーがアイコンをクリックしてギャラリーを表示すると、最初に選択したギャラリーがフェードインしてすべてが明るくなります。しかし、別の div を選択すると、表示されていたものがフェードアウトし始め、もう一方がその下にフェードインし、最初の div が非表示になると正しい位置に移動します。

jsfiddleを参照してください。

したがって、私の質問は明らかです。
次のギャラリーが正しいスペースにフェードアウトする前に、彼らが表示していたギャラリーを完全にフェードアウトするにはどうすればよいですか。

4

4 に答える 4

7

あなたの問題は、ドキュメントの次の文で説明されています（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">&nbsp;</div>  
<div id="image_two" class="imageBox" style="background-color:blue;height:50px;width:50px">&nbsp;</div>
<div id="image_three" class="imageBox" style="background-color:yellow;height:50px;width:50px">&nbsp;</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/

このコードを単純化する方法はたくさんあります。

于 2012-04-11T17:23:47.270 に答える
3

これは面白かったです...あなたがjsfiddleをセットアップする方法が好きです-それは簡単にいじることができました. これが役立つかどうかを確認してください..fadeOutsは複数の要素にバインドされています。表示されているものだけをフェードアウトします。あなたの問題は、すでにフェードアウトしている要素でフェードアウトが呼び出されていることだと思います。

ここにあなたのjsfiddleのわずかなバリエーションがあります..

$(function(){
        $('#image_two,#image_three').hide();

//1//       

          $('.icon_one').click(function(){                
              $('#image_two:visible,#image_three:visible').fadeOut(
                  function(){

                     $('#image_one').fadeIn();
                  }
              );
           });

//2//
alert("binding");
   $('.icon_two').click(function(){
       $('#image_one:visible,#image_three:visible').fadeOut(
            function(){
                $('#image_two').fadeIn();
             }
                                            );
  });

    //3//

   $('.icon_three').click(function(){
       $('#image_one:visible,#image_two:visible').fadeOut(function(){
        $('#image_three').fadeIn();
        });
  });

});
于 2012-04-11T17:33:36.103 に答える
2

divを互いに重ねて配置できますposition:absolute;

作業例： http: //jsfiddle.net/Ghokun/wnTte/13/

于 2012-04-11T17:31:51.627 に答える
1

交換してはどうですか

$('#image_one').fadeIn();

と

$('#image_one').delay(500).fadeIn();

そして賢いように....

于 2012-04-11T17:19:14.860 に答える