Jquery 为什么slideDown动画会自动首先用于slideUp动画？

我只需点击一个按钮就可以添加一些结果。我正在使用

slideDown

方法来显示这些新结果，但不知道为什么这些新结果首先

slideUp

，然后执行

slideDown

动画。当我清除添加的结果时，它会立即被删除，而没有任何动画

请查看此演示：

$（'#sb'）。单击（函数（）{
var html=''；
html++=''++'假结果..'+''；
html++=''++'假结果..'+''；
html++=''++'假结果..'+''；
$（html）.hide（）.prependTo（'#searchresults'）.slideDown（'slow'）；
});
$（'#clearb'）。单击（函数（）{
$（'#searchresults>div'）。slideUp（'slow'）。remove（）；
});

这是css造成的：

-webkit-transition: all 1s ease-in-out;

---

我给了

.result

一个名为

h0

的类，它的

高度为0px属性。这样，当您单击
#sb
时，它们没有高度。动画结束后，应删除
div
s

对于chrome问题，请将转换从
all
更改为
背景色

你可以找到工作案例

CSS

Javascript

$('#sb').click ( function(){
  var html = '';

  html += "<div class='result h0'>" + 'fake results.. ' +  '</div>';
  html += "<div class='result h0'>" + 'fake results.. ' +  '</div>';
  html += "<div class='result h0'>" + 'fake results.. ' +  '</div>';
  $(html).hide().prependTo('#searchresults').slideDown('slow');
});


$('#clearb').click ( function(){
  var $divs = $('#searchresults>div');
  $divs.slideUp('slow', function() { $divs.remove(); });
});

$（'#sb'）。单击（函数（）{
var html=''；
html++=''++'假结果..'+''；
html++=''++'假结果..'+''；
html++=''++'假结果..'+''；
$（html）.hide（）.prependTo（'#searchresults'）.slideDown（'slow'）；
});
$（'#clearb'）。单击（函数（）{
var$divs=$（“#搜索结果>div”）；
$divs.slideUp（'slow'，function（）{$divs.remove（）；}）；
});
但是我需要这个来实现鼠标悬停效果。这个脚本在chromeThere中也有同样的问题，修复了chrome的问题。：）看起来不需要
h0
（使用safari）。刚刚将过渡从
all
更改为
background color
，工作起来很有魅力：）。接受你的回答。
.h0 { height: 0px; }
#searchresults .result{
  padding: 1.2em;
  margin-left: 2em;
  color: #690011;
  border-radius: 1.8em;
  -webkit-transition: background-color 1s ease-in-out;
  background-color: #F0B616;
}

$('#sb').click ( function(){
  var html = '';

  html += "<div class='result h0'>" + 'fake results.. ' +  '</div>';
  html += "<div class='result h0'>" + 'fake results.. ' +  '</div>';
  html += "<div class='result h0'>" + 'fake results.. ' +  '</div>';
  $(html).hide().prependTo('#searchresults').slideDown('slow');
});


$('#clearb').click ( function(){
  var $divs = $('#searchresults>div');
  $divs.slideUp('slow', function() { $divs.remove(); });
});