Question

我有一个用于淡入淡出图像的面板。但是，第一张图像在第二张图像淡入之前完全消失。我希望它们同时褪色。

我正在使用Spry效果，因为我对Javascript不太熟悉，但这就是我所拥有的。

在我的HTML中：

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

在我的Javascript效果脚本中（还有主要的选项卡式面板js，但它不相关）：

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

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

Answer 1

尝试这样的事情：

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

您需要将其容器设置为position:relative，然后将其设置为代码

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

感谢Galambalazs和Gaby。在您的帮助下，我得到了解决方案。在将容器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();
}});

结合多个Javascript淡化效果

3 个答案: