jquery の html() を使用して要素を移動しようとしています。以下の例を参照してください。
HTML:
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="myDiv"></div>
Jクエリ:
//on some event (for example, onclick, onmouseover, onkeydown....), the code below will be triggered
var $myDiv = $("#myDiv");
$("#div1").html($myDiv);
//after some other event, the code below will be triggered
$("#div5").html($myDiv);
//after some other event, the code below will be triggered
$("#div4").html($myDiv);
//etc....
基本的に、上記の html() メソッドを使用して $myDiv を div1-5 間で移動しようとしています。しかし、 $myDiv がある div から別の div に移動するときにもトランジションを行いたいので、次の css を試しましたが、うまくいきませんでした。CSS:
#myDiv {
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
すべてのdivのサイズがわからず、サイズが変わる可能性があるため、上と左のトランジションは実際には使用できません。
誰かが良い解決策を持っていることを願っています。
ありがとう