Объединение нескольких эффектов затухания JavaScript - PullRequest
Новая
       6

Объединение нескольких эффектов затухания JavaScript

0 голосов
/ 10 июля 2010

У меня есть панель, которая выцветает и исчезает. Тем не менее, первое изображение полностью исчезает до того, как второе изображение исчезает. Я хотел бы, чтобы они исчезали одновременно.

Я использую эффект 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();
        }});
    }});

Я вижу, что он говорит, что когда исчезновение заканчивается, начинайте постепенное появление. Но я не знаю, как его изменить, чтобы они происходили одновременно.

Ответы [ 3 ]

0 голосов
/ 11 июля 2010

Вам нужно будет установить их контейнер на 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();
}});
0 голосов
/ 11 июля 2010

Спасибо Галамбалазам и Габи.С вашей помощью я смог получить решение.Установив относительное положение контейнера div и определив для него высоту, я использовал следующий код, чтобы сделать то, что хотел: 

    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();
}});
0 голосов
/ 10 июля 2010

Попробуйте что-то вроде этого: 

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