组合多个Javascript淡入淡出效果

我有一个面板，可以淡入淡出图像。但是，在第二个图像淡入之前，第一个图像会完全淡出。我希望它们同时褪色

我之所以使用Spry效果，是因为我对Javascript不太熟悉，但以下是我所拥有的

在我的HTML中：

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

---

我可以看到它在说当淡出结束时，开始淡入。但我不知道如何改变它，使它们同时发生。

试试这样的方法：

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

---

您需要将它们的容器设置为position:relative，然后在代码中设置为position

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

---

谢谢Galambalazs和Gaby。在你的帮助下，我找到了解决办法。将container div的位置设置为relative并为其定义了一个高度后，我使用以下代码来完成我想要的操作：

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

---

谢谢，加拉姆巴拉兹。这正是它应该做的，但问题是第二个面板在第一个面板下明显呈现，因为它是在HTML中设置的，而不是在它后面。好吧，现在我知道你的布局了，我可以告诉你，这是做不到的。因为在原始形式中发生的是，第二个被隐藏，而第一个被淡出，然后第一个被隐藏，第二个被显示并淡入。这是一个骗局，他们从来没有真正的对对方。所以你不能用当前的布局实现你想要的。是的，当我看到你的解决方案时，我想除非我真的重新设计它，否则这可能是不可能的。谢谢你的努力。我还没有完全放弃。如果我使用galambalazs的解决方案，但也包括nextPanel.style.position='absolute'；nextPanel.style.top='0'；它越来越近了，虽然仍然不正确。谢谢，加比，但是当它的孩子进入绝对位置时，容器不能保持它的形状。它只是缩小了，因为它认为它什么也拿不住。事实上，我把它弄到手了，这样它就可以反弹来容纳它的孩子，但只有在它在褪色时突然合上一秒钟之后。此外，绝对定位不尊重顶部填充，尽管它可能不应该这样做，所以它移动得太高。将top设置为9px或在js中添加9px的top padding会导致其他问题。而且，在第一次转换时，定位不是问题。只有在接下来的几场比赛中，比赛才会搞砸。但是容器快照以及当前面板在消失到下一个面板之前100%的闪烁始终是一致的。您现在可以包括整个页面，或者使用HTML制作一个示例，因为我们只是在猜测，而没有it@Beau，正如@galambalazs所说，您需要在某处提供完整的工作页面html/css/javascript。。。否则，我们无法知道可能会干扰我们提供的解决方案的具体细节。如果有人感兴趣，我必须添加currentPanel.style.opacity='100'；currentPanel.style.filter='alphaopacity=100'；在self.showPanelnextPanel之后；在代码的顶部。现在一切都很好。

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