Question

I am adding few results on click of a button. I am using slideDown method to show these new results, but no idea why these new results first slideUp and then perform a slideDown animation. And when I clear added results, it is removed instantly with no animation at all.

Please have a look on this demo: 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

I gave to .result a class named h0 which has height: 0px; property. This way they have no height when you click #sb. You should remove divs after animation ends.

For chrome problem, change the transition from all to background-color.

You can find working case 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(); });
});