jquery：effect()

上記プログラムは下記になります。

<div class='box'>
  <div class='box_no1'>
    <div class='box_text'>このBOXをクリックするとテキストが移動します</div>
  </div>
  <div class='box_no2'></div>
</div>
<style>
	.box{display:flex;}
	.box_no1{
		width:150px;height:150px;
		background-color:pink;
		cursor:pointer;
	}
	.box_no2{
		width:200px; height:200px;
		background-color:yellow;
		cursor:pointer;
	}
	.box_text{padding:10px;}
	.ui-effects-transfer{border:1px solid #555;}
</style>
<script>
	$(function() {
		$('.box_no1').click(function() {
			if($(this).text() == '') {alert('テキストが空です')}
			else{
				$(this).effect('transfer',{to:$('.box_no2')}, 1000, function() {
					$('.box_no2').html($(this).html());// box1のテキストをCSS付きでbox2に書く
					$(this).html(''); // box1のテキストを消去する
				});
			}	 
		});
		$('.box_no2').click(function() {
			if($(this).text() == '') {alert('テキストが空です')}
			else{
				$(this).effect('transfer', { to:$('.box_no1')}, 1000, function() {
					$('.box_no1').html($(this).html());// box2のテキストをCSS付きでbox1に書く
					$(this).html(''); // box2のテキストを消去する
				});
			}
		});
	});
</script>

■20行目：トランスファーする枠のCSSを指定しています。

■27～30行目、36～39行目

枠をトランスファーした後に、枠にあるテキストをCSS付きでターゲットに下記、元のテキストを消去しています。

上記プログラムは下記になります。

<div style='display:flex;margin-left:28px;'>
	|&nbsp;<div class='bounce'>bounce</div>&nbsp;|&nbsp;
	<div class='pulsate'>pulsate</div>&nbsp;|&nbsp;
	<div class='shake'>shake</div>&nbsp;|&nbsp;
	<div class='reset'>リセット</div>&nbsp;|&nbsp;
</div>
<div class='msg' style='margin-left:28px;color:red;'></div>
<button class='button' type='button' name='input_name'>会員登録</button>
<style>
	.button{
		color:white;background:blue;
		padding:10px;margin-left:28px;}
	.bounce , .pulsate , .shake , .reset{cursor:pointer;color:blue;}
	.msg{color:red;margin-left:28px;margin-top:10px;}
</style>
<script>
	$(function(){
		timer_bounce=0 , timer_pulsate=0 , timer_shake=0;       // タイマーの初期化(グローバル変数)
		function func_bounce(){$('.button').effect('bounce');}  // bounce関数の定義
		function func_pulsate(){$('.button').effect('pulsate');}// pulsate関数の定義
		function func_shake(){$('.button').effect('shake');}    // shake関数の定義
		$('.bounce').click(function(){
			clearInterval(timer_pulsate);// pulsateタイマーのリセット
			clearInterval(timer_shake);  // shakeタイマーのリセット
			$('.msg').text('bounce を実行します。');
			timer_bounce = setInterval(func_bounce,2000);
		});
		$('.pulsate').click(function(){
			clearInterval(timer_bounce);// bounceタイマーのリセット
			clearInterval(timer_shake); // shakeタイマーのリセット
			$('.msg').text('pulsate を実行します。');
			timer_pulsate = setInterval(func_pulsate,2000);
		});
		$('.shake').click(function(){
			clearInterval(timer_bounce); // bounceタイマーのリセット
			clearInterval(timer_pulsate);// pulsateタイマーのリセット
			$('.msg').text('shake を実行します。');
			timer_shake = setInterval(func_shake,2000);
		});
		$('.reset').click(function(){
			$('.msg').text('');
			clearInterval(timer_bounce);// bounceタイマーのリセット
			clearInterval(timer_pulsate);// pulsateタイマーのリセット
			clearInterval(timer_shake); // shakeタイマーのリセット
		});
	});	
</script>

■タイマー処理はTimer処理を参照してください。

■22～27行目：bounce効果の処理を行っています。

bounceのパラメータはここを参照して下さい。

■28～33行目：pulsate効果の処理を行っています。

pulsateのパラメータはここを参照して下さい。

■34～39行目：shake効果の処理を行っています。

shakeのパラメータはここを参照して下さい。

■40～42行目：リセット処理を行っています。