【jQuery】animateでアニメーション中に新たに溜まった動作の処理をしない

jQueryのanimate関数でアニメーションが終了するまでにボタンを連打するなど、
何度もアニメーションを実行すると、不自然にアニメーションを繰り返す事がある。

これはアニメーション動作は、全てqueue(キュー)に溜まるので、
動作中に新たに溜まった動作を全ての動作が完了するまで実行し続ける為である。

アニメーションが終わった時点でqueueの中身を消すことで、
後続のアニメーション(動作中に新たに溜まった動作)が実行されないようにする。

【記述例】

$(this).animate({width: 10}, 100, function(){
	$(this).queue([]);		// queueを空にする
	$(this).stop();			// アニメーション停止
});

【jQuery】画像ロールオーバー時にフェイド変化するサンプルコード[rolloverfade.js]

画像ロールオーバー時にフェイドしながら変化するサンプルコード[rolloverfade.js]を作ってみた。

⇒デモ

【手順1】

ロールオーバーON時とOFF時の画像を準備する。
ON時の画像にはファイル名に“_on”を付けて保存する。

rolloverfade

【手順2】

下記のコードをjsファイル(rolloverfade.js)として保存する。

$(function(){
	var selector_1 = 'ul.fadeBlock li';		// imgの親要素指定
	var selector_2 = 'fade_img';			// imgのclass指定
	var selector = selector_1 + ' img.'+ selector_2; 
	
	for (i=1; i<=$(selector_1).length; i++){
		$(selector_1 + ':nth-child(' + i + ') img').removeClass(selector_2).addClass(selector_2 + i);
		// 関数実行
		rollOverFadeEffect(selector + i);
	}

	// ユーザ定義関数
	function rollOverFadeEffect(selector){
		var change_img = $(selector).not('src=*' + '_on' + '.');
		change_img.each(function(){
			this.mouse_over_img = new Image();
			this.mouse_over_img.src = $(this).attr('src').replace(new RegExp('(\.gif|\.jpg|\.png)$'), '_on' + '$1');
			$(this.mouse_over_img).css({position: 'absolute', opacity: 0});
			$(this).before(this.mouse_over_img);
		
			$(this.mouse_over_img).hover(function(){
				$(this).animate({opacity: 1});
			},
			function(){
				$(this).animate({opacity: 0});
			});		
		});
	}
});

【手順3】

htmlファイルにjqueryと先ほど保存したrolloverfade.jsを呼ぶ出す。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/rolloverfade.js"></script>

【手順4】

htmlファイルにロールオーバー時にフェイド変化させたい画像を記述し、
imgタグ内にクラス(ここではclass=”fade_img”)を記述する。

<div id="contents">
	<ul class="fadeBlock">
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
	</ul>
</div>

【手順5】

最後にrolloverfade.js内の変数にセレクタを記述し代入する。
“selector_1″に”imgの親要素指定”、”selector_2″に”imgのclass指定”を設定する。

<script>
	var selector_1 = 'ul.fadeBlock li';		// imgの親要素指定
	var selector_2 = 'fade_img';			// imgのclass指定
</script> 

【完成】

rolloverfade02

⇒デモ

【スマホサイト】viewport(ビューポート)を指定してスマホサイトに対応する

スマートフォン・タブレットには、iPhone/iPadなどのiOS端末や様々なAndroid端末が存在し、それぞれ異なった解像度を持つ。
WEBページ制作者は、それぞれ異なった解像度を持ったデバイスに対応する必要がある

スマートフォンに適した表示をするために「viewport(ビューポート)」を設定する。

viewportはWEBページに設定する仮想的な画面幅で、viewportの設定値により仮想的な画面幅を指定する事ができる。

iPhoneでは何もしなければ横幅980pxでWEBページが表示される。

デフォルトのviewport設定はデバイス・ブラウザによって異なるので、WEBページの<head>タグ内にviewportを<meta>タグに記述して上書きする

<meta name="viewport" content="パラメーター=値">

【viewportのパラメーターと値】

■width
値 : 任意のピクセル
デフォルト値 : 980px
範囲 : 200~10000px
または、device-width(デバイスの横幅に合わせる)
■height
値 : 任意のピクセル
デフォルト値 : widthの値とデバイスのアスペクト比から自動算出
範囲 : 233~10000px
または、device-height(デバイスの縦幅に合わせる)
■initial-scale
値 : 初期拡大率
デフォルト値 : 1
範囲 : minimum-scale~maximum-scaleの範囲内
■minimum-scale
値 : 拡大率の最小scale値
デフォルト値 : 0.25
範囲 : 0~10.0まで
■maximum-scale
値 : 拡大率の最大scale値
デフォルト値 : 1.6
範囲 : 0~10.0まで
■user-scalable
値 : ズーム操作の有無
デフォルト値 : yes
範囲 : yes,no

【viewport指定例】

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

デバイスの画面幅いっぱいをviewportの幅にしたい場合は”width”の値に”device-width”を指定する。

ズームの範囲は”minimum-scale”と”maximum-scale”の範囲内に制限される。

画面を拡大縮小させたくない場合は”user-scalable”の値に”no”を指定する。