0

jQuery を使用して簡単な Web サイトを構築していますが、小さな質問があります。

次のプログラムがあります。

$(document).ready(function() {
  $('#nr1').click(function() {
    var $this = $(this);
    if ($this.hasClass("clicked-once")) {
      $('#nr1').animate({
        width: "290px",
        height: "190px"
      }, 400);
      setTimeout(function() {
        $("#nr2").fadeIn('fast');
        $("#nr3").fadeIn('fast');
        $("#nr4").fadeIn('fast');
      }, 375);
      $this.removeClass("clicked-once");
    } else {
      $this.addClass("clicked-once");
      $('#nr1').animate({
        width: "600px",
        height: "400px"
      }, 400);
      $("#nr2").fadeOut('fast');
      $("#nr3").fadeOut('fast');
      $("#nr4").fadeOut('fast');
    }
  });

  $('#nr2').click(function() {
    var $this = $(this);
    if ($this.hasClass("clicked-once")) {
      $('#nr2').animate({
        width: "290px",
        height: "190px"
      }, 400);
      setTimeout(function() {
        $("#nr1").fadeIn('fast');
        $("#nr3").fadeIn('fast');
        $("#nr4").fadeIn('fast');
      }, 375);
      $this.removeClass("clicked-once");
    } else {
      $this.addClass("clicked-once");
      $('#nr2').animate({
        width: "600px",
        height: "400px"
      }, 400);
      $("#nr1").fadeOut('fast');
      $("#nr3").fadeOut('fast');
      $("#nr4").fadeOut('fast');
    }
  });

  $('#nr3').click(function() {
    var $this = $(this);
    if ($this.hasClass("clicked-once")) {
      $('#nr3').animate({
        width: "290px",
        height: "190px"
      }, 400);
      setTimeout(function() {
        $("#nr1").fadeIn('fast');
        $("#nr2").fadeIn('fast');
        $("#nr4").fadeIn('fast');
      }, 375);
      $this.removeClass("clicked-once");
    } else {
      $this.addClass("clicked-once");
      $('#nr3').animate({
        width: "600px",
        height: "400px"
      }, 400);
      $("#nr1").fadeOut('fast');
      $("#nr2").fadeOut('fast');
      $("#nr4").fadeOut('fast');
    }
  });

  $('#nr4').click(function() {
    var $this = $(this);
    if ($this.hasClass("clicked-once")) {
      $('#nr4').animate({
        width: "290px",
        height: "190px"
      }, 400);
      setTimeout(function() {
        $("#nr1").fadeIn('fast');
        $("#nr2").fadeIn('fast');
        $("#nr3").fadeIn('fast');
      }, 375);
      $this.removeClass("clicked-once");
    } else {
      $this.addClass("clicked-once");
      $('#nr4').animate({
        width: "600px",
        height: "400px"
      }, 400);
      $("#nr1").fadeOut('fast');
      $("#nr2").fadeOut('fast');
      $("#nr3").fadeOut('fast');
    }
  });

});
@charset "utf-8";

/* CSS Document */

* {
  margin: 0;
  padding: 0
}
/* mac hide \*/

html,
body {
  height: 100%;
  width: 100%;
}
/* end hide */

body {
  background-image: url(backgroundNY.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  text-align: center;
  min-height: 468px;
  /* for good browsers*/
  min-width: 552px;
  /* for good browsers*/
}
#container {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 100;
  height: 400px;
  margin-top: -200px;
  width: 600px;
  margin-left: -300px;
}
#nr1 {
  font-family: Verdana, Geneva, sans-serif;
  line-height: 200px;
  color: #999999;
  font-size: xx-large;
  border-radius: 10px;
  width: 290px;
  height: 190px;
  margin-left: 0px;
  margin-top: 0px;
  background-color: #ECDEC2;
  position: absolute;
}
#nr2 {
  font-family: Verdana, Geneva, sans-serif;
  line-height: 200px;
  color: #999999;
  font-size: xx-large;
  border-radius: 10px;
  width: 290px;
  height: 190px;
  margin-left: 310px;
  margin-top: 0%;
  background-color: #ECDEC2;
  position: absolute;
}
#nr3 {
  font-family: Verdana, Geneva, sans-serif;
  line-height: 200px;
  color: #999999;
  font-size: xx-large;
  border-radius: 10px;
  width: 290px;
  height: 190px;
  margin-left: 0%;
  margin-top: 210px;
  background-color: #ECDEC2;
  position: absolute;
}
#nr4 {
  font-family: Verdana, Geneva, sans-serif;
  line-height: 200px;
  color: #999999;
  font-size: xx-large;
  border-radius: 10px;
  width: 290px;
  height: 190px;
  margin-left: 310px;
  margin-top: 210px;
  background-color: #ECDEC2;
  position: absolute;
}
<body>
  <div id="container">
    <div id="nr1">
      Placeholder
    </div>

    <div id="nr2">
      Placeholder
    </div>

    <div id="nr3">
      Placeholder
    </div>

    <div id="nr4">
      Placeholder
    </div>
  </div>
</body>

ご覧のとおり、4 つのプレースホルダーがあります。最初のプレースホルダーをクリックすると、本来の機能が実行され、開いたり閉じたりすることがわかります。別のものをクリックすると、まったく同じことが行われますが、それは私が探しているものではありません。私が探しているのは、別のプレースホルダーをクリックすると反対側のコーナーに開くことです。したがって、左下隅のプレースホルダーは右上隅に開く必要がありますが、その方法がわかりません。マージンを変更して試しましたが、うまくいきませんでした。誰かがこれで私を助けてくれることを願っています。

4

1 に答える 1

0

ボックスの位置を与える：

First box: top: 0; left: 0;

Second: top: 0; right: 0;

Third: bottom: 0; left: 0;

etc.

http://jsfiddle.net/fPTNk/2/

于 2013-05-22T12:48:10.553 に答える