Почему анимация slideDown автоматически запускается для анимации slideUp?

Question

Я добавляю несколько результатов по щелчку кнопки. Я использую метод slideDown, чтобы показать эти новые результаты, но не знаю, почему эти новые результаты сначала slideUp, а затем выполните анимацию slideDown. И когда я удаляю добавленные результаты, он мгновенно удаляется без анимации.

Пожалуйста, посмотрите на эту демо: http://jsbin.com/imulem

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

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


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

Answer 1

Я дал .result класс с именем h0, который имеет свойство height: 0px;. Таким образом, они не имеют высоты, когда вы нажимаете #sb. Вы должны удалить div с после окончания анимации.

Для проблемы с хромом, смените переход с all на background-color.

Рабочий стол here.

CSS

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

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

Answer 2

Это КСС вызывает его:

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