Question

我有一个搜索功能，用ajax加载结果，并使用幻灯片动画显示结果。效果很好！但不幸的是，第二次（以及之后）下滑动画不起作用。

搜索没有在那里执行，并没有加载ajax数据，但你明白了。谢谢你的帮助！

Answer 1

替换

slideToggle('#results',true); // inside hideLoading()

<强>与

content.slideDown();

Answer 2

这是因为您将0的高度设置在if支票内（这是第一次仅为真）：

  // get the original height
  if( !height ){
    // get original height
    height = $el.show().height();
    // update the height
    $el.data("originalHeight", height);
    // if the element was hidden, hide it again
    if( !visible ) $el.hide().css({height: 0});
  }

需要像这样搬到外面：

  // get the original height
  if( !height ){
    // get original height
    height = $el.show().height();
    // update the height
    $el.data("originalHeight", height);
  }
  // if the element was hidden, hide it again
  if( !visible ) $el.hide().css({height: 0});

这样，它会适当地隐藏每个时间，you can test it out here。

Answer 3

我认为这部分是错误的

if( !height ){
    // get original height
    height = $el.show().height();
    // update the height
    $el.data("originalHeight", height);
    // if the element was hidden, hide it again
    if( !visible ) $el.hide().css({height: 0});
  }

您显示元素以获得其高度，因此它不会滑动，因为它可见！

您应该使用css()方法设置position:absolute，visibility:hidden和display:block。

无论如何，JQuery提供了替换你的函数的方法，看看slides

高度修复的jQuery UI幻灯片动画仅适用于第一次

3 个答案: