Question

我只是在我的个人网站上工作，给它一些改进。

我实现了一种'手风琴'菜单功能，如果单击一个菜单按钮，“未点击”按钮消失，然后单击的按钮移动到列表顶部，然后a面板动画向下，我将放置文本内容。

在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）但是有人有快速解决方案吗？现在已经很晚了。它正在努力。

非常感谢，

戴夫

Answer 1

当您将元素切换为绝对时，您尝试使用元素的当前位置...例如：

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

请注意，有两种不同的偏移功能，我不知道你想在这里使用哪一种，所以你可能想查看那篇文档。

此外，您可以随时重新设计jQuery-ui手风琴并为自己省去麻烦; - ）

jQuery animate（）来定位问题

1 个答案: