jQuery animate () для позиционирования вопроса

Question

Я просто работаю над своим личным веб-сайтом, немного обновляя его.

Я реализовал своего рода функцию меню «аккордеон», в которой при нажатии кнопки меню «не нажатые» кнопки исчезают, а затем нажатая кнопка перемещается в начало списка, где затем Анимация панели вниз, в которой я буду помещать текстовое содержание.

В Firefox это работает отлично, однако в IE и Chrome кнопка переходит на верх страницы и затем анимируется в положение, а не с того места, откуда она началась.

Кто-нибудь есть идеи, как это исправить?

Оскорбительный код:

function Accordion(e)
 {
  var o =
  {
   init: function()
   {
    o.button = e;
    o.addClickHandler();
   },

   addClickHandler: function()
   {
    o.button.click(function(){
     o.button.removeClass('unselected');
     o.button.addClass('selected');
     o.fader();
    });
   },

   fader: function()
   {
    $j('.unselected').animate({opacity:0}, 1000);

    var wait = setInterval(function() {
     if(!$j('.unselected').is(":animated") ) {
      clearInterval(wait);
      o.shifter();
     }
    }, 100);
   },

   shifter: function()
   {
    o.button.css({'position':'absolute'});
    o.button.animate({top:91}, 500, o.createInfoBox);
   },

   createInfoBox: function()
   {
    var buttonParent = o.button.parent();
    buttonParent.append("<div class='infoBox'></div>");
    $j('.infoBox').animate({height:390});
   }
  }

  o.init();
  return o;
 }
}

Проблема заключается в функции сдвига, где я устанавливаю абсолютное положение, а затем анимирую, чтобы достичь желаемого эффекта. Я понимаю, почему он делает это (предположим, что он просто сбрасывает себя на вершину: 0, а затем анимирует на вершину: 91), но есть ли у кого-нибудь быстрое решение? Уже поздно, и это делает мою голову.

Очень ценится,

Dave

Answer 1

H Вы пытались использовать текущую позицию элемента при переключении на абсолютное значение ... например:

function() { 
  var currentp = $(this).offset();
  o.button.css({'position':'absolute', top: currentp.top}); 
  o.button.animate({top:91}, 500, o.createInfoBox); 
}

Обратите внимание, что есть две разные функции смещения, и я не уверен, какую из них вы хотите использовать, поэтому вы можете просмотреть документы по этому вопросу.

Также вы всегда можете просто переназначить аккордеон jQuery-ui и избавить себя от хлопот; -)