Question

点击按钮，我添加的结果很少。我使用slideDown方法显示这些新结果，但不知道为什么这些新结果会先slideUp然后执行slideDown动画。当我清除添加的结果时，它会立即被移除而根本没有动画。

$('#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

这个css导致它：

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

Answer 2

我向.result提供了一个名为h0且具有height: 0px;属性的类。这样，当您点击#sb时，它们没有高度。您应该在动画结束后删除div。

对于Chrome问题，请更改从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(); });
});

为什么slideDown动画会首先自动进行slideUp动画？

2 个答案: