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という名前のクラスに与えました。こうすると、 をクリックしても高さがなくなります。アニメーションの終了後に sを削除する必要があります。h0height: 0px;#sbdiv

クロムの問題については、トランジションを から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 に答える