2

私は潜在的なフレームワークを設計していて、メインのdiv内に複数のportlet（div）があります。divを移動するときは、ページの上部に移動して垂直方向に展開したいと思います。 これらはすべて動作しますが、可動部分をアニメートしたいと思います。

これは私のコードがどのように見えるかです

$('#smallpotletdiv').prependTo($('#maindiv'));

アニメーションについてもっと知っている人は何を提案しますか？divが現在の場所から移動し、新しい場所にアタッチする方法を教えてください。

4

3 に答える 3

0

私はあなたが使うことができると思います：

  $('#smallpotletdiv').animate

あなたはそれのパラメータを使うことができます：例のために

width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'

JQueryアニメーション

于 2012-04-06T20:52:20.070 に答える
0

最後に、animateとprependを使用して位置を操作します。付加が完了したら、値をデフォルトに変更します

$("#smallpotletdiv").animate({
      top: 300,
      left: 500     
}).prependTo($("#maindiv")).css({
      top: 'auto',
      left: 'auto'
});

アップデート：

作業コードは次のようになります

current.animate({
  top: -30,
  left: -20     
}, 2000, function() {
    current.prependTo(prependToDiv).css({
       top: 'auto',
       left: 'auto'
    });        
});

こちらをチェック

それらの実行の問題は、要素を左右に移動できるように配置しなかったことです。そのためには、要素を絶対的に配置する必要がありますposition: absolute。

于 2012-04-07T00:01:03.320 に答える
0

これを実装するためのクールなツールの1つは、react-magic-movehttps://www.npmjs.com/package/react-magic-moveと呼ばれるReactJSツールです 。

これは、DOMを操作して、要素がスムーズに配置される場所を変更する可能性があります。ただし、サポートされておらず、古いバージョンのReactJSを使用しているため、実装は簡単ではありません。

こちらのデモをご覧ください： https ：//www.youtube.com/watch？v = z5e7kWSHWTg＃t = 424

于 2015-07-10T06:43:08.770 に答える