別のdivをクリックしたときにdivを（最右端に表示されないように）ページに移動するにはどうすればよいですか？下のcodepenでは、緑のdiv（id = "three"）をページから外し、赤いdiv（id = "two"）をクリックすると、各divがページの50％を超えて移動するので、緑のdiv右側に赤いdivが左側に表示されます。 緑色のdivを右に置くか、必要なときに表示されません。ビュー内の視野外のdivを移動する
私はこのような何かしようとした：
$('#two').on('click', function(){
$('#three').css("right", "0");
})
をそれがまったく機能しませんでした。
ご協力いただきましてありがとうございます。
http://codepen.io/amstrudy/pen/VjAQAp
#three要素は、要素を移動させるright: -1000px;ためにposition: relative;性を必要とします。それが追加されたら、.css()を$('#three'), not $（ '＃slider'） `に変更するようにjQueryに指示する必要があります。
$('#two').on('click', function() {
$('#three').css("right", "0px");
});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;
}<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>あなたがそうでなければ、それぞれの正方形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;
}
これはあなたが達成したいものである場合はわかりません。その場合、主なポイントは、DIVsの位置を適切に設定することです。また、がhiddenに設定されている3つのを含む別のDIVを追加して、ページ外の場合は3番目の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>
その行、 '$（ '＃スライダは'）、CSS（ "右"、 "0"）;'スライダー」の 'id'属性を持つ要素を探しています" - この例では私は見ていない。 –
あなたの3番目のdiv「＃three」は「右端に」ありません。 – akinuri
Ito Pizarro - そう、それはコードペンのタイプミスです。 – amstrudy