0

だから私はこのサンプルコードを持っています：

<ul>
  <li class="class1">row1</li>
  <li class="removeme">row2</li>
  <li class="removeme">row3</li>
  <li class="removeme">row4</li>
  <li class="class1">row5</li>
</ul>

//Javascript
$('.removeme').remove();

すべてのremoveme要素が削除されたら、row5要素がその動きを上にアニメーション化するようにするにはどうすればよいですか？私のcss3トランジションも設定されています。

4

2 に答える 2

0

css3で何を設定したかわかりませんが、以下はjQueryでできることです。

$('.removeme').animate({height: 0}, 2000, function () {
    $(this).remove();
});

デモ: http://jsfiddle.net/MwYH5/

1つずつ削除したい場合は、以下のようにチェーンできます。

デモ: http://jsfiddle.net/MwYH5/1/

(function removeNext(jq) {
    jq.eq(0).animate({height: 0}, 1000, function () {
        $(this).remove();
        (jq = jq.slice(1)).length && removeNext(jq);            
    });
})($('.removeme'))

参照: http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/#comment-24910

于 2013-01-24T23:23:37.883 に答える
0

"remove me" の li をコンテナー (スパンなど) に入れ、そのコンテナーを折りたたむことができます。

$(container).fadeTo(200,0).animate({height: 0});

そんな感じ。

于 2013-01-24T23:23:45.120 に答える