0

我正在用 jQuery 构建一个简单的网站，我有一个小问题：

我有以下程序：

$(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 回答