6

これが私の例です：http://jsfiddle.net/MT5xS/

最初の画像をクリックすると、その画像が削除され、次のすべての画像が元のスペースに移動します。しかし、動きが速すぎて、動いたという認識さえありません。

私の質問は、これらの要素をスムーズに動かすにはどうすればよいですか? このhttp://youtu.be/-r7K4LTbI4A?t=27sのように、アイコンを移動または削除すると、基本的に iPhone のようになります。

IE6/7/8 やその他の互換性の問題については心配していません。

4

6 に答える 6

8

私が知っている最も一般的な解決策は、hide()をアニメーション化してから、コールバック関数で画像を削除することです。

$('.user-pic').live('click', function() {
    var $item = $(this).closest('li');
    $item.hide('slow', function(){ $item.remove(); });
});​

デモ- アニメーション要素の削除

于 2012-09-08T00:28:39.707 に答える
1

もう 1 つのオプションは、fadeTo0、animate()画像の幅を 0、次にremove().

http://jsfiddle.net/MT5xS/2/

于 2012-09-08T00:32:32.773 に答える
1

この jQuery プラグインを見てみましょう: http://razorjack.net/quicksand/

それはあなたが説明していると私が思うことをします。あなたはそれを使用するか、カバーの下を見て、それがどのように行われているかを確認することができます. すべてのグリッド項目で position: absolute を使用していると思います。

于 2012-09-08T00:36:51.030 に答える
0

私はあなたがしたいことだと思います...

$(element).css("visibility", "hidden");
$(element).animate({"width": 0}, "slow", function() {
  $(this).remove();
});

ここにフィドルがありますhttp://jsfiddle.net/MT5xS/4/

于 2012-09-08T00:35:54.097 に答える
0

これを試してみてください。スライドしてから削除します

$('.user-pic').live('click', function() {
  $(this).closest('li').slideUp('slow', function() {
    $(this).remove();
  });
});​
于 2012-09-08T00:36:22.347 に答える
0

クリックで要素を削除する代わりに、ターゲット要素をフェードアウトしてから要素を削除します。removeこれは、目的のアニメーションの後にチェーンしても実現できないことに注意してください。

古い学校に頼ることを選択した場合はsetTimeout()、正しい変数のスコープについて覚えておく必要があります。または、アニメーションの完了時に実行されるコールバックを追加することもできます。

var $el = $(this).closest('li');    //no need to operate directly on img imo
$el.animate({
  opacity: 0    //plus any other animation you want... height:0, width:0, ...
}, 1000, function() {
  $el.remove();
});

いじられた

于 2012-09-08T00:26:32.043 に答える