Combining Multiple Javascript Fade Effects

Question

Hello. I have a panel that fades images in and out. However, the first image fades completely out before the second image fades in. I would like them to be fading at the same time.

I'm using a Spry effect because I'm not too familiar with Javascript, but here's what I have.

In my HTML:

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

And in my Javascript effects script (there's also the main tabbed panels js, but it's not relevant):

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();
        }});
    }});

I can see that it's saying when the fade out finishes, start the fade in. But I don't know how to change it so that they happen at the same time.

Thank you.

Answer 1

Try something like this:

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 2

You would need to set their container to be position:relative and then in your 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();
}});

Answer 3

Thanks Galambalazs and Gaby. With your help, I was able to get the solution. After setting the container div's position to relative and defining a height for it, I used the following code to do what I wanted:

    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();
}});