4

要素 (elemA) を別の要素 (elemB) に対して相対的に配置したい。そのため、次のように jQuery ui position ユーティリティを使用しています。

 $(elemA).position({my:'right top', at:'left top', of:elemB});

しかし、アニメーション効果でその配置を行いたいです。

.animate()自分のタスクを達成するためにどのように使用できますか?

これまでに行ったことは、このfiddleで確認できます。jQueryとjQuery uiを使ってアニメーション効果でelemAを新しい位置にスライドさせたいです。

4

2 に答える 2

1

メソッドのusingオプション コールバックを使用しposition()て、配置されている要素をアニメーション化できます。

指定すると、実際のプロパティ設定がこのコールバックに委譲されます。2 つのパラメーターを受け取ります。1 つ目は、設定する必要がある位置の top 値と left 値のハッシュで、.css()orに転送できます.animate()。

(私が追加したリンク)

したがって、コードは次のようになります。

$('#btn').click(function() {
  $('#elemA').position({
    my: 'right top',
    at: 'left top',
    of: $('#elemB'),
    using: function(pos) {
      $(this).animate(pos, "slow")
    }
  });

});
#elemA {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
#elemB {
  width: 100px;
  height: 100px;
  background: green;
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div>
  <div id="elemA">
    <button id="btn">click</button>
  </div>
  <div id="elemB"></div>
</div>

于 2014-10-28T19:48:13.333 に答える