0

基本的に、「.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も独学で勉強しているだけなので、曖昧で申し訳ありません。私は喜んで明らかにしようとします。

4

1 に答える 1

0

あなたがやろうとしていることを完全に理解しているのかどうかはわかりませんが、あなたがやっていることと一致すると思うjsFiddleを設定しました。基本的に、私は本当に何よりもポジショニングを処理するためにCSSに依存しています。jQueryは、選択した列を展開および折りたたんで、コンテナーの幅をリセットするために使用されます。使用する代わりに、position:absolute設定された幅とを使用していmargin:0 autoます。そうすれば、コンテナのサイズが変更されたときに左側のオフセット位置などを計算する必要がなくなります。

于 2013-03-19T19:36:10.440 に答える