【JQuery】クリックでコンテンツを右からスライド表示
クリック動作で画面の右側から要素をスライドで表示させる方法。
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%"}); }); });
コメントを残す