Tweet

Pocket

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

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%"});
	});
});