2

我在单击按钮时添加了一些结果。我正在使用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();
        });
4

2 回答 2

1

这个CSS导致它：

-webkit-transition: all 1s ease-in-out;
于 2012-05-24T10:05:09.920 回答
1

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

对于 chrome 问题，将过渡从 更改all为background-color.

你可以在这里找到工作案例。

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(); });
});
于 2012-05-24T10:08:28.330 回答