jQuery - divs nicht vollständig ausgeblendet, bevor die nächste beginnt Einblendung

Question

Ich weiß, dass das Problem einfach ist, aber es macht mir verdammt viel Mühe, es herauszufinden. Ich habe 8 divs auf einer Seite, die Bildergalerien, die aus versteckt zu starten halten. Wenn ein Benutzer auf ein Symbol klickt, um eine Galerie anzuzeigen, wird die erste Galerie, die er ausgewählt hat, ganz glänzend eingeblendet. Wenn er jedoch eine andere Galerie auswählt, wird diese ausgeblendet, während die andere darunter eingeblendet wird, und dann in die richtige Position verschoben, während das erste Div ausgeblendet wird.

Siehe jsfiddle .

Meine Frage ist also offensichtlich:
Wie schaffe ich es, dass die gerade angezeigte Galerie vollständig ausgeblendet wird, bevor die nächste Galerie an der richtigen Stelle eingeblendet wird?

Answer 1

Ihr Problem wird durch diesen Satz in der Dokumentation erklärt ( fadeOut ):

Wenn mehrere Elemente animiert werden, ist es wichtig zu beachten, dass der Callback einmal pro angepasstem Element ausgeführt wird, nicht einmal für die Animation als Ganzes.

Mit anderen Worten: Da Sie zwei Dinge animieren, wird der Callback zweimal aufgerufen. Da eines Ihrer Divs bereits ausgeblendet ist, wird der fadeOut ist sofort fertig* und ruft sofort zurück.

* Das sofortige Abschließen, wenn es bereits angezeigt/ausgeblendet ist, ist nur bei den Hilfsfunktionen des Typs Anzeigen/Ausblenden möglich. Wenn Sie Ihre eigene Einblendungsanimation konstruieren, würde diese immer die angegebene Zeitspanne benötigen, unabhängig vom aktuellen Zustand.

Sie können dies auf verschiedene Weise beheben. Die einfachste ist die Verkettung Ihrer fadeOut() Aufrufe ineinander, anstatt einen Aufruf für beide Elemente:

$('.icon_one').click(function() {
    $('#image_two').fadeOut(function() {
        $('#image_three').fadeOut(function() {
            $('#image_one').fadeIn();
        });
    });
});

Da das eine in der Regel bereits ausgeblendet ist, wird es sofort durchfallen, das andere wird aber Zeit brauchen. In jedem Fall wird die Einblendung erst dann erfolgen, wenn beide vollständig sind.

Demo: http://jsfiddle.net/jtbowden/XQnhs/

Natürlich können Sie mit einer kleinen Änderung an Ihrem HTML-Code alle drei Funktionen mit un Klick-Handler:

<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>

Drehbuch:

$('.icon_show').click(function() {
    var showID = '#image_' + $(this).data('num');
    $('.imageBox:visible').fadeOut(function() {
        $(showID).fadeIn(400);
    });
});

Demo: http://jsfiddle.net/jtbowden/NAcPW/

Der Schlüssel dazu ist, dass Sie anhand des Links, den Sie anklicken, automatisch herausfinden, welcher angezeigt werden soll. In diesem Fall tue ich das, indem ich eine Zahl in einem Datenattribut speichere. Sie könnten auch nur einen Teil der ID verwenden oder den Offset mit index und diese dann in eq .

Demo: http://jsfiddle.net/jtbowden/NnN58/

Es gibt viele Möglichkeiten, diesen Code zu vereinfachen.

Answer 2

Das war interessant... Ich mag die Art, wie Sie Ihre jsfiddle- es machte es einfacher, um mit zu spielen. sehen, wenn dies hilft.. fadeOuts sind an mehr als Element gebunden. Nur das sichtbare Element wird ausgeblendet. Ich denke, Ihr Problem ist fadeout ist immer auf Elemente, die bereits ausgeblendet aufgerufen.

hier ist eine leichte Abwandlung Ihres 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();
        });
  });

});

Answer 3

Sie können Divs übereinander platzieren mit position:absolute;

Arbeitsbeispiel: http://jsfiddle.net/Ghokun/wnTte/13/

Answer 4

Wie wäre es mit dem Ersetzen von

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

mit

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

und wie wise....