0

1 つの div が複製され、それが正しくdisplay: inline設定されているために、divのグリッドがあるとしましょう。float: left

[1] [2] [3]

4] [5] [6]

[7] [8] [9]

さて、それらの1つをjqueryで削除すると、それら.hide() はすべてスクートして、残ったフローティングdivの代わりになります。そして、特に 3 がなくなった場合のように行を変更する場合、[4] と [7] はより高い行に昇格します。

では、この変更にある種のアニメーション効果を適用するにはどうすればよいですか? それらを直線的にアニメーション化できればいいのですが、ある場所でフェードアウトして別の場所でフェードインするといいでしょう。

PS私の実際のアプリケーションはdivを削除せず、それらのサイズを大きくしてサイズを変更し、divを右と下に移動します。

ヘルプ！

ありがとう ：：]

4

1 に答える 1

0

http://jsfiddle.net/Ha28t/

あなたが求めた効果を連鎖させたこのフィドルをチェックしてください。特定の div が失われた場合、div が 500 ミリ秒を超えて「急ぐ」だけでなく「ゆっくりと入る」ようにトランジションをアニメーション化します。

jQuery('#header ul li:nth-child(2)').click(function(event){
  event.preventDefault();   
  jQuery('div.piece').css("border","solid 1px black");
  jQuery('div.piece:not(.photo)').css("border","none");
  jQuery('div.piece:not(.photo)').animate({ width: -2 }, 
    { duration: 500, queue: false });
  jQuery('div.photo').animate({ width: 98 }, 
    { duration: 500, queue: false });
});

お役に立てれば！

于 2013-08-25T17:07:13.270 に答える