Combinaison de plusieurs effets de fondu Javascript

Question

J'ai un panneau qui fait fondre les images. Cependant, la première image s'estompe complètement avant que la deuxième image n'apparaisse. Je voudrais qu'ils disparaissent en même temps. J'utilise un effet Spry parce que je ne connais pas trop Javascript, mais voici ce que j'ai.

Dans mon HTML:

<script type="text/javascript"> 
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { interval: 3000 }); 
TabbedPanels1.start(); 
</script> 

Et dans mon script d'effets Javascript (il y a aussi les principaux panneaux à onglets js, mais il est pas pertinent):

Spry.Widget.TabbedPanels.prototype.fadeInNextPanel = function() 
{ 
    if (!Spry.Effect || !Spry.Effect.DoFade) 
    { 
     // The fade effect isn't available, so just 
     // show the next panel. 

     this.showNextPanel(); 
     if (this.timerID) 
      this.start(); 
     return; 
    } 

    var curIndex = this.getCurrentTabIndex(); 
    var panels = this.getContentPanels(); 
    var currentPanel = panels[ curIndex ]; 
    var nextPanel = panels[ (curIndex + 1) % this.getTabbedPanelCount() ]; 
    var self = this; 

Spry.Effect.DoFade(currentPanel, {duration: 1000, from: 100, to: 0, toggle: false, finish: function() 
    { 
     nextPanel.style.opacity = '0'; 
     nextPanel.style.filter = 'alpha(opacity=0)'; 

     self.showPanel(nextPanel); 

     currentPanel.style.opacity = ''; 
     currentPanel.style.filter = ''; 
     Spry.Effect.DoFade(nextPanel, {duration: 1000, from: 0, to: 100, toggle: false, finish: function() 
     { 
      if (self.timerID) 
       self.start(); 
     }}); 
    }}); 

je peux voir qu'il est dit quand le fondu se termine, commence le fondu. Mais je ne sais pas comment le changer pour qu'ils se produisent en même temps.

Answer 1

Merci Galambalazs et Gaby. Avec votre aide, j'ai pu obtenir la solution. Après avoir réglé le conteneur de la position div relative et définissant une hauteur pour elle, je le code suivant pour faire ce que je voulais:

currentPanel.style.zIndex = '0'; 
    currentPanel.style.opacity = ''; 
    currentPanel.style.filter = ''; 
    nextPanel.style.position = 'absolute'; 
    nextPanel.style.top = '9px'; 
    nextPanel.style.zIndex = '1000'; 
    nextPanel.style.opacity = '0'; 
    nextPanel.style.filter = 'alpha(opacity=0)'; 

Spry.Effect.DoFade(currentPanel, {duration: 500, from: 100, to: 0, toggle: false, finish: function() 
{ 
    self.showPanel(nextPanel); 
    currentPanel.style.opacity = '100'; 
    currentPanel.style.filter = 'alpha(opacity=100)'; 
}});  

Spry.Effect.DoFade(nextPanel, {duration: 500, from: 0, to: 100, toggle: false, finish: function() 
{ 
    if (self.timerID) 
    self.start(); 
}}); 

Answer 2

Essayez quelque chose comme ceci:

nextPanel.style.opacity = '0'; 
nextPanel.style.filter = 'alpha(opacity=0)'; 
self.showPanel(nextPanel); 

Spry.Effect.DoFade(currentPanel, { 
    duration: 1000, 
    from: 100, 
    to: 0, 
    toggle: false, 
    finish: function() { 
     currentPanel.style.opacity = ''; 
     currentPanel.style.filter = ''; 
}});  

Spry.Effect.DoFade(nextPanel, { 
    duration: 1000, 
    from: 0, 
    to: 100, 
    toggle: false, 
    finish: function() { 
     if (self.timerID) 
      self.start(); 
}}); 

Answer 3

Vous auriez besoin de mettre leur récipient à position:relative puis dans votre code

currentPanel.style.position= 'absolute'; 
currentPanel.style.zIndex= '10'; 

nextPanel.style.position = 'absolute'; 
nextPanel.style.zIndex= '100'; 
nextPanel.style.opacity = '0'; 
nextPanel.style.top = '0px'; 
nextPanel.style.filter = 'alpha(opacity=0)'; 
self.showPanel(nextPanel); 

Spry.Effect.DoFade(currentPanel, { 
    duration: 1000, 
    from: 100, 
    to: 0, 
    toggle: false, 
    finish: function() { 
     currentPanel.style.opacity = ''; 
     currentPanel.style.filter = ''; 
     currentPanel.style.zIndex = '0'; 
}});  

Spry.Effect.DoFade(nextPanel, { 
    duration: 1000, 
    from: 0, 
    to: 100, 
    toggle: false, 
    finish: function() { 
     if (self.timerID) 
      self.start(); 
}});