さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】クリックでコンテンツを右からスライド表示

Pocket
LINEで送る

クリック動作で画面の右側から要素をスライドで表示させる方法。

SCSS

.slideContents { // 画面右からスライド表示させる要素
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	z-index: 5;
}

JQuery

$(function(){
	// コンテンツを表示
	$('.linkButton').on('click', function () {
		$(".slideContents").css({ // 右から表示されるコンテンツ枠
			left:"100%",
			opacity:"0.0"
		}).animate({
			left:"0",
			opacity:"1.0"
		},500);
	});
	
	// コンテンツを非表示
	$('.close').on('click', function () { // 表示されたコンテンツをクリックで削除
		$(".slideContents").css({"opacity": "0", "left": "100%"});
	});
});

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容