javascript - 使用 jquery 删除和重新出现 html 元素时遇到问题

Question

基本上我想向下滑动一个元素，然后当再次点击按钮时我希望它向上滑动，清空 div，然后向下滑动并显示新结果。我长期以来一直试图弄清楚如何做到这一点，但我似乎无法让它与 jquery 一起工作。

$(".search").on("click",function(){
    $('.results').slideUp(500).empty().append("<p>Results</p>").hide().slideDown(500)
});

我知道这是特定于我的项目的，但我确实觉得其他人可能会发现这很有用

Answer 1

我不确定您的问题到底是什么，但我认为您的示例中未显示幻灯片动画。

slideUp 方法采用第二个参数，即函数回调。当 SlideUp Action 完成时调用它。如果您在此回调函数中执行其余操作，则保证在 SlideUp 之后执行。

jQuery('#testbutton').on('click',function() {
  $('#testlist').slideUp(500, function() {
    $('#testlist').empty().append("<li>this is a test</li>").slideDown(500);
  });  
});

您可以在这里找到完整的示例:

https://jsfiddle.net/dxyybwyh/5/