基本的に、「.animate」を使用して、水平方向に表示および非表示を行う 4 つの列を持つスプラッシュ ページを作成しようとしています。現時点では、基本的なレイアウトの作成には成功していますが、4 つの列が入っているコンテナー (列を開くと 5 のサイズに拡張されます) は、列を開くとページの中心からオフセットされます。コンテナー div は、x 軸と y 軸を中心に絶対配置されます。div 全体を左にシフトして中央に戻そうとしましたが、列を閉じると、div はシフトしません。だから私の質問は、すべての列が閉じているときにdivを元に戻すにはどうすればよいですか?
// JavaScript Document
$(document).ready(function(){
$("#button1").click(function(){
$(".row").not("#button1").animate();
$("#slide1").animate({
width:'toggle'
});
$("#slide2").animate({
width:'hide'
});
$("#slide3").animate({
width:'hide'
});
$("#slide4").animate({
width:'hide'
});
});
$("#button2").click(function(){
$(".row").not("#button2").animate();
$("#slide2").animate({
width:"toggle"
});
$("#slide1").animate({
width:"hide"
});
$("#slide3").animate({
width:"hide"
});
$("#slide4").animate({
width:"hide"
});
});
$("#button3").click(function(){
$(".row").not("#button3").animate();
$("#slide3").animate({
width:"toggle"
});
$("#slide1").animate({
width:"hide"
});
$("#slide2").animate({
width:"hide"
});
$("#slide4").animate({
width:"hide"
});
});
$("#button4").click(function(){
$(".row").not("#button4").animate();
$("#slide4").animate({
width:"toggle"
});
$("#slide1").animate({
width:"hide"
});
$("#slide3").animate({
width:"hide"
});
$("#slide2").animate({
width:"hide"
});
});
// reposition container //
$("#button1,#button2,#button3,#button4").click(function(){
$("#container").animate({
left:'50%',
marginLeft:'-500px'
});
});
});
余談ですが、私はjQueryも独学で勉強しているだけなので、曖昧で申し訳ありません。私は喜んで明らかにしようとします。