jQuery animate() to position issue

Question

I'm just working on my personal website, giving it a bit of a revamp.

I've implemented a sort of 'accordion' menu feature, where if a menu button is clicked, the "non-clicked" buttons disappear, and then the clicked button is moved to the top of the list, where then a panel animates down in which I will be putting text content.

In Firefox this works perfectly, however in IE and Chrome the button jumps to the top of the page and then animates to position, instead of animating from where it started from.

Anyone any ideas how to fix this?

Offending code:

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

The issue lies within the shifter function, where I'm setting the position to absolute and then animating so the desired effect can be achieved. I understand why it's doing this (presume it's just resetting itself to top:0 and then animating to top:91) but does anyone have a quick solution? It's late and it's doing my head in.

Much appreciated,

Dave

Answer 1

HAve you tried using the current position of the element when you switch it to absolute... for example:

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

Note there are two different offset functions and im not sure which one you want use here so you might want to review the docs on that.

Also you could always just re-theme the jQuery-ui accordian and save yourself the trouble ;-)