jquery - 具有高度修复的 jQuery UI 幻灯片动画仅在第一次工作

Question

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

请看这里：http: //jsfiddle.net/e4sQh/4/

没有在那里执行搜索，也没有加载 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});

这样它每次都会适当地隐藏，你可以在这里测试它。

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

You show element to get its height, so it doesn't slide as it's visible!

You should use css() method to set position:absolute, visibility:hidden and display:block.

Anyway JQuery provides method which replace your function, take a look on slides