DIV要素のボックスを移動させるスクリプト教えて
やりたい事は
(1)
Ｌ・Ｒという２つのラジオボタンを設置し、
ウィンドウ左に配置したＤＩＶ要素のボックスを、
Lをクリックでウィンドウ左、
Rをクリックでウィンドウ右に配置を変更させる。
(2)
画像ボタンを設置し、クリックされると
ＤＩＶ要素のボックスを、ウィンドウ枠外へスライドさせ、
再クリックで元の配置にスライドさせ戻したい。
初心者のためスクリプトをどのように記述すれば、
良いか解らず質問させていただきます。
ご教授よろしくお願いします。
http://www11.ocn.ne.jp/~website/sample3/index.html
一応参考アドレスを記載させていただきますが
この記述方法だと、ＤＩＶ要素のボックスが左側にあるとき、
画像ボタンクリックで、ＤＩＶ要素のボックスを、
ウィンドウ枠外へスライドさせ、
再クリックで元の配置に戻すと、
その後、Rをクリックしても、ＤＩＶ要素のボックスが
ウインドウ右側へ移動しなくなってしまいます。
===== HTML ====
<body>
<div id="wrapper">
<header></header>
<nav></nav>
<div id="box" class="box_l">
<label>
<input type="radio" id="radio1" name="test" checked="checked" />
L</label>
<label>
<input type="radio" id="radio2" name="test" />
R</label>
</div>
<div id="tab" class="tab_l"></div>
<section id="section01" class="section">
<p>PAGE1</p>
</section>
</div>
<div id="page_top"></div>
<footer></footer>
</body>
==== CSS ====
.box_l {
position: fixed;
top:30px;
left:0px;
z-index: 2000;
width: 90px;
height: 160px;
padding: 20px 5px 5px 5px;
background-color: rgba(0,0,0,0.25);
}
.box_r {
position: fixed;
top:30px;
right:0px;
z-index: 2000;
width: 90px;
height: 160px;
padding: 20px 5px 5px 5px;
background-color: rgba(0,0,0,0.25);
}
.tab_l {
position: fixed;
top:30px;
left:100px;
z-index: 2000;
width: 30px;
height: 185px;
background-color: rgba(0,0,0,0.25);
background-image: url(../images/tnm2.png);
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
border-radius: 0 10px 10px 0; /* CSS3草案 */
-webkit-border-radius: 0 10px 10px 0; /* Safari,Google Chrome用 */
-moz-border-radius: 0 10px 10px 0; /* Firefox用 */
}
.tab_r {
position: fixed;
top:30px;
right:100px;
z-index: 2000;
width: 30px;
height: 185px;
background-color: rgba(0,0,0,0.25);
background-image: url(../images/tnm1.png);
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
border-radius: 10px 0 0 10px; /* CSS3草案 */
-webkit-border-radius: 10px 0 0 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px 0 0 10px; /* Firefox用 */
}
#section01 {
min-height: 100%;
min-width:320px;
width: 100%;
height: 1000px;
}
#section01 p {
font-style: normal;
font-weight: 400;
color: #000;
font-size: 48px;
text-align: center;
}
==== SCRIPT ====
$(window).on('load', function() {
for (i = 1; i <= 2; i++) {
document.getElementById('radio' + i).checked = i==1;
}
});
$(function() {
$("[name='test']").click(function(){
var num = $("[name='test']").index(this);
if(num == 1){
$("#box").removeClass("box_l").addClass("box_r");
$("#tab").removeClass("tab_l").addClass("tab_r");
} else {
$("#box").removeClass("box_r").addClass("box_l");
$("#tab").removeClass("tab_r").addClass("tab_l");
}
})
$(".tab_l,.tab_r").toggle(function(){
$(".box_l").animate({'left':'-100px'},300);
$(".tab_l").css('background-image','url(images/tnm1.png)').animate({'height':'40px','left':'0px'},300);
$(".box_r").animate({'right':'-100px'},300);
$(".tab_r").css('background-image','url(images/tnm2.png)').animate({'height':'40px','right':'0px'},300);
},
function(){
$(".box_l").animate({'left':'0px'},300);
$(".tab_l").css('background-image','url(images/tnm2.png)').animate({'height':'185px','left':'100px'},300);
$(".box_r").animate({'right':'0px'},300);
$(".tab_r").css('background-image','url(images/tnm1.png)').animate({'height':'185px','right':'100px'},300);
})
})
お礼
おかしいですね、ちゃんとOpacityになっているはずなんですが CSS---------------------------------------------------------------------------- /* ページ全体のスタイル */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } /* ヘッダーのスタイル */ header { background-color: #2d2d2d; color: #fff; padding: 20px 0; text-align: center; } .logo { font-size: 36px; font-weight: bold; } nav ul { list-style: none; } nav li { display: inline; margin: 0 15px; } nav a { text-decoration: none; color: #fff; font-weight: bold; font-size: 18px; } /* イントロセクション（ホーム）のスタイル */ .intro { background-image: url('intro-background.jpg'); background-size: cover; color: #fff; text-align: center; padding: 100px 0; } .intro h1 { font-size: 48px; margin-bottom: 20px; } /* ポートフォリオセクションのスタイル */ .portfolio { background-color: #f4f4f4; padding: 40px 0; } .portfolio h2 { text-align: center; font-size: 36px; } /* ポートフォリオグリッドのスタイル */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .portfolio-item { position: relative; overflow: hidden; box-sizing: border-box; /* 余白を要素の幅と高さに含める */ margin-bottom: 20px; /* 下部の余白 */ background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); height: auto; /* イメージの高さを自動調整 */ width: 100%; /* 例: 幅を100%に */ } .portfolio-item img { max-width: 100%; height: auto; width: 100%; /* 画像を親要素に合わせて幅を100%に */ height: auto; /* アスペクト比を維持 */ } /* コンタクトセクションのスタイル */ .contact { background-color: #333; color: #fff; text-align: center; padding: 100px 0; } .contact h2 { font-size: 36px; } /* フッターのスタイル */ .footer { background-color: #2d2d2d; color: #fff; text-align: center; padding: 20px 0; } .contact-info, .social-media { margin: 20px 0; } .social-media a { margin: 0 10px; } .portfolio-item { /* 既存のスタイル */ display: inline-block; vertical-align: middle; width: 200; } /* フェードインの初期設定 */ .fadein { opacity: 0; transform: translateY(20px); /* 下から上にスライドさせる */ transition: opacity 0.5s, transform 0.5s; } /* フェードインアクティブ時の設定 */ .fade-in-active { opacity: 1; transform: translateY(0); /* 上にスライドさせない */ } これでhtmlのdiv要素のクラスにfadeinを追加したんですが、 飲んで寝ますか（笑 結構お酒、好きな人多いですよね。
補足
補足情報です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script> <script src="js/fadein.js"></script> <script src="js/masonry.js"></script> <title>Illustfolio 3風のポートフォリオ</title> <body> <header> <div class="logo">Illustfolio</div> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main> <section id="home"> <h1>Welcome to my Portfolio</h1> <p>Explore my artwork and designs.</p> </section> <section id="portfolio"> <h2>Portfolio</h2> <div class="portfolio-grid text-center"> <!-- div要素に変更 --> <div class="portfolio-item fadein"> <img src="img/img1.jpg" alt="Artwork 1"> <p>Artwork 1</p> </div> <div class="portfolio-item fadein"> <img src="img/img2.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img3.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img4.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img5.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img6.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img1.jpg" class="text-center" alt="Artwork 1"> <p>Artwork 1</p> </div> <div class="portfolio-item fadein"> <img src="img/img2.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img3.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img4.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img5.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img6.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img1.jpg" class="text-center" alt="Artwork 1"> <p>Artwork 1</p> </div> <div class="portfolio-item fadein"> <img src="img/img2.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img3.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img4.jpg" alt="Artwork 2"> <