string(11) "3.239.76.25"

2022年04月24日

jquery:effect()

このメソッドの説明

effect() はjQueryメソッドです。

要素に表示効果(エフェクト)を与えるアニメーションを実行します。

 

尚、これを利用する為には JQuery UI が必要となります。

導入の仕方は、jQuery機能の追加 を参照してください。

 


メソッド

セレクタ.effect( effect , options , duration , complete)

 


パラメータ

effect (文字列)(必須)

要素に与えるeffect(効果)を指定します。

 

options (文字列)(省略可)

各々のeffect毎に定められたオプションを指定します。

指定方法は{ オプション名① : , オプション名② : }の形式で記述します。

 

duration (整数)(省略可)

エフェクトの実行時間

初期値:400ms

指定方法は下記の文字列でも可

'slow'    :600ms

・'normal':400ms

・'fast'    :200ms

 

complete (関数)(省略可)

エフェクトの処理後に実行する関数

 


事例例

1.transfer効果を利用する

トランスファー(要素枠の移動)効果を利用します。

[指定できるパラメータ]

オプション名 説明
to 要素枠の転送先の要素名を指定します(必須)

to:$('.クラス名')で指定します。

className 要素枠を指定するクラス名

className:$('.クラス名')で指定します。

省略時のクラス名は .ui-effects-transfer になります。

上記に要素枠のCSSを記述します。

■指定方法は'transfer',{to:値,classname:値},アニメ時間, function(){アニメ後の処理}になります。

[事例]

左のBOXをクリックして下さい。

文字が右のBOXに移動します。逆からも文字は移動します。

文字が無いBOXをクリックするとアラートメッセージが表示されます。

このBOXをクリックするとテキストが移動します

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

<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付きでターゲットに下記、元のテキストを消去しています。

 

2.要素を定期的に振動させる。

要素と振動させる効果には下記の様なものがあります。

JQuery UI 説明
bounce バウンドさせる効果です。
pulsate 要素を点滅させる効果です。
shake 要素をシェイクする効果です。

下記のメニュをクリックして下さい。ボタンが振動要素で定期的に振動します。

bounce
 | 
pulsate
 | 
shake
 | 
リセット
 | 

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

<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処理を参照してください。

­­メモ

上記プログラムでタイマーのハンドル名(timer_bounce、timer_pulsate、timer_shake)にVar宣言をしてない理由は下記になります。

変数規則と文字連結で説明している様に、Var宣言をするとローカル変数、宣言をしないとグローバル変数になります。

ローカル変数は関数の中で有効な変数なので、上記の様に他の関数の中で値を修正する場合は、グローバル変数としてデータを受け渡す必要があるためです。

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

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

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

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

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

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

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

 

関数一覧
  • 1.JavaScript/jQueryとは
  • 2.[JS] 変数規則と文字連結
  • 3.[JS] if文
  • 4.[JS] 配列操作
  • 5.[JS] 文字列操作
  • 6.[JS] 画面情報&操作
  • 7.[JS] Timer処理
  • console.log()
  • for
  • for in
  • for of
  • indexOf()
  • join()
  • length
  • map()
  • match()
  • Object.keys()
  • Object.values()
  • parseInt()
  • pop()
  • push()
  • replace()
  • shift()
  • slice()
  • split()
  • toString()
  • unshift()
  • 1.jQueryの導入と記述の基本
  • 2.jQueryの機能追加
  • 3.jQuery文法
  • 4.階層構造の要素セレクトと操作
  • 5.要素サイズ取得メソッド
  • animate()
  • append()
  • attr()
  • change(func)
  • click()
  • click(func)
  • css()
  • each(func)
  • effect()
  • empty()
  • fadeTo()
  • get()
  • hover(f1,f2)
  • html()
  • map(func)
  • mousedown(func)
  • prop()
  • resize(func)
  • show()、hide()
  • slideToggle()
  • submit()
  • submit(func)
  • text()
  • toggle()
  • toggleClass()
  • val()