Question

当点击另一个div时，如何将div（最右侧应该不在视图范围内）移动到页面上？在下面的编码器中，我希望绿色div（id =“3”）离开页面，当点击红色div（id =“2”）时，每个div移动超过页面的50％，所以绿色div在右边，红色div在左边。我不能让绿色div保持在右边，或者在我想要的时候出现。

我试着这样做：

$('#two').on('click', function(){
    $('#three').css("right", "0");
})

但它根本不起作用。

感谢任何帮助！

http://codepen.io/amstrudy/pen/VjAQAp

Answer 1

#three元素需要position: relative;属性才能让right: -1000px;移动元素。添加完成后，您必须告诉jQuery将.css()更改为$('#three'), not $（＆＃39;＃slider＆＃39;）`。

＆＃13;

$('#two').on('click', function() {
  $('#three').css("right", "0px");
});

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
}
#one {
  background-color: blue;
  float: left;
}
#two {
  background-color: red;
  float: right;
}
#three {
  background-color: green;
  float: right;
  right: -1000px;
  position: relative;
  /* this is necessary to position the element using 'right' */
}
#one,
#two,
#three {
  height: 100%;
  width: 50%;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</body>

＆＃13;

Answer 2

你应该制作每个方格position: absolute or relative否则，它们不会在不同的流程中互相交互。不得不改变jQuery，你只移动绿色框，也需要移动红色框。蓝色的那个是index:-1，当红色框移动到绿色框时，红色框会被红色框覆盖。

html, body {
  position: relative;
  height: 100%;
  width: 100%;
}

#one {
  background-color: blue;
  float: left;
  z-index: -1;
}

#two {
  background-color: red;
  float: right;
  right: 0;
  cursor:pointer;
}

#three {
  background-color: green;
  float: right;
  right: -1000px;
}

#one, #two, #three {
  position: absolute;
  height: 100%;
  width: 50%;
  display: inline;
}

CODEPEN

Answer 3

不确定这是否是您想要实现的目标。如果是，则主要是适当地设置DIVs的位置，并添加另一个DIV，其中包含DIVs设置为overflow的{{1}} hidden 1}}隐藏第三个DIV，当它离开页面时。

$('#two').on('click', function() {
  $('#two').css('left', '0');
  $('#three').css('left', '50%');
});

html,
body {
  height: 100%;
  width: 100%;
}
.container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
}
#one,
#two,
#three {
  position: absolute;
  left: 0px;
  background-color: blue;
  width: 50%;
  height: 100%;
  display: inline-block;
  padding: 0px !important;
  margin: 0px !important;
  -webkit-transition: left 2s; /* Safari */
  transition: left 2s;
}
#two {
  background-color: red;
  left: 50%;
}
#three {
  background-color: green;
  left: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

在视图中移动视图外的div

3 个答案: