jquery - オブジェクトがjQueryで非表示になっている場合、周囲の要素は新しい位置にスナップインします。どうすればそれらを新しい位置にアニメートさせることができますか？

Question

たとえば、20個のアイテムのリストがあります。それぞれがグリッド形式のように3列のボックスです。

グリッドの上には、探しているものに応じて、リスト内のさまざまなアイテムを表示および非表示にできるオプションがあります。

ユーザーが特定のリストアイテムを非表示にすると、それらはフェードアウトし、他のすべてのアイテムは新しい位置にスナップします。

スムーズなフェード効果の後、スナップアクションはあまり見栄えが良くありません。要素を新しい位置にスライドさせる方法はありますか？

ありがとうございました。

Answer 1

非表示にしている要素 の不透明度と高さをアニメーション化します。

Answer 2

jQuerysアニメーション関数を調べる必要があります。例では、必要な処理をほぼ実行できます。

 $('#clickme').click(function() {
  $('#book').animate({
    opacity: 0,
    height: 'toggle'
  }, 5000);
});