jQuery - divs verblassen nicht vollständig, bevor das nächste beginnt

Question

Das Problem ist ein einfaches, ich weiß, aber ich habe eine Menge Zeit mit dem Versuch, es herauszufinden. Ich habe 8 Divs auf einer Seite, die Bildergalerien enthalten, die versteckt beginnen. Wenn ein Benutzer auf ein Symbol klickt, um eine Galerie anzuzeigen, blendet die erste Galerie, die sie ausgewählt haben, glänzend aus. Aber wenn sie sich für ein anderes entscheiden, beginnt dasjenige, das sie sahen, auszublenden, während das andere darunter verschwindet, und bewegt sich dann in seine korrekte Position, während das erste Div verborgen ist.

Siehe jsfiddle.

Also, meine Frage ist offensichtlich:
Wie bekomme ich die Galerie, die sie angezeigt haben, vollständig ausgeblendet, bevor der nächste in den richtigen Raum verblasst.

Answer 1

Sie divs auf der jeweils anderen platzieren können mit position:absolute;

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

Answer 2

wie etwa

ersetzt

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

mit

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

und wie weise ....

Answer 3

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

Wenn mehrere Elemente ani sind mattiert, ist es wichtig zu beachten, dass der Callback einmal pro übereinstimmendes Element ausgeführt wird, nicht einmal für die Animation als Ganzes.

Mit anderen Worten, weil Sie zwei Dinge animieren, wird der Rückruf zweimal aufgerufen. Da eine Ihrer divs bereits ausgeblendet ist, wird die fadeOut sofort * abgeschlossen und ruft sofort zurück.

* Das sofortige Vervollständigen, wenn bereits gezeigt/ausgeblendet ist, ist einzigartig für die Hilfefunktionen zum Anzeigen/Verdecken. Wenn Sie eine eigene Überblendungs-Animation erstellen würden, würde dies unabhängig vom aktuellen Status immer die angegebene Zeit dauern.

Sie können dies auf verschiedene Arten beheben. Am einfachsten ist es, Kette Ihre fadeOut() Anrufe innerhalb von einander, statt einer auf beiden Elemente aufrufen:

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

Weil man in der Regel bereits versteckt wird, wird es durch sofort fallen, aber der andere wird einige Zeit dauern. Wie auch immer, nur wenn beide abgeschlossen sind, wird das Einblenden stattfinden.

Demo:

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

Script:

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

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

Natürlich mit einer wenig Änderung Ihrer HTML, Sie alle drei mit einem Click-Handler tun können Demo: http://jsfiddle.net/jtbowden/NAcPW/

Der Schlüssel ist, dass Sie automatisch anhand des Links, auf den Sie klicken, herausfinden, welcher angezeigt werden soll. In diesem Fall mache ich das, indem ich eine Zahl in einem Datenattribut ablege.Sie können auch nur einen Teil der ID verwenden, oder indem Sie den Offset mit index ermitteln und diesen dann in eq eingeben.

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

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

Answer 4

Das war interessant ... Ich mag die Art, wie Sie richten Sie jsfiddle- es einfacher gemacht um zu spielen mit. Sehen Sie, ob das hilft. fadeOuts sind an mehr als nur an Elemente gebunden. Blendet nur den sichtbaren aus. Ich denke, dein Problem ist das Ausblenden von Elementen, die bereits ausgeblendet sind.

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

});