w2utils.transition

transition(div_old, div_new, type, [callBack])

2つのdivを変化させます。

div_old: HTML要素, jQueryオブジェクト

変化前のdiv。

div_new: HTML要素, jQueryオブジェクト

変化完了後のdiv。

type: string

変化手法の種類。

callBack: function

変化完了時に呼び出す関数。オプションです。

説明

第1引数のdiv_oldは、変化前のdivです。 第2引数のdiv_newは、変化後のdivです。 第3引数のtypeは以下を指定することができます。

• slide-left
• slide-right
• slide-top
• slide-bottom
• flip-left
• flip-right
• flip-top
• flip-bottom
• pop-in
• pop-out

以下のように指定することができます。

| var div1 = $('#div1');
| var div2 = $('#div2');
| w2utils.transition(div1, div2, 'slide-left');

デモ

プルダウンを選択するたびに、選択した内容のアニメーションを表示します。

* jQueryオブジェクトは使用できないようです。

JavaScript

$('#type_list').on('change', function(){
  var div1 = document.getElementById('demo1');
  var div2 = document.getElementById('demo2');
  w2utils.transition(div1, div2, $(this).val());
});

CSS

.boxes {
  height: 184px;
  position: relative;
}
.boxes div {
  padding: 8px;
  height: 160px;
  width: 160px;
}
#demo1 {
  color: #00695C;
  background-color: #69F0AE;
}
#demo2 {
  color: #311B92;
  background-color: #FF4081;
  display: none;
}

HTML

<div class="boxes">
  <div id="demo1">GreenBox</div>
  <div id="demo2">RedBox2</div>
</div>
<select id="type_list">
  <option value="slide-left">slide-left</option>
  <option value="slide-right">slide-right</option>
  <option value="slide-top">slide-top</option>
  <option value="slide-bottom">slide-bottom</option>
  <option value="flip-left">flip-left</option>
  <option value="flip-right">flip-right</option>
  <option value="flip-top">flip-top</option>
  <option value="flip-bottom">flip-bottom</option>
  <option value="pop-in">pop-in</option>
  <option value="pop-out">pop-out</option>
</select>