このdivをjQueryで上から下にスライドさせるにはどうすればよいですか？

Question

私はディスプレイブロックの親の2つのdivsの子を持っています。私はdiv＃2（緑色）をdiv＃1（赤色）の上にしたいと思っています。 "上に"私はz-indexについて話しているわけではありません、私は文字通り他のものの上にあることを話しています。そして、div＃2を作成する方法があるかどうか疑問に思っていた。slideDown（）

jQueryのslideDown（）またはslideUp（）の動作は異なっている。私が作ったデモで 、私はアイテム2

$('.item-1').slideUp(); 

を実行する項目1の代わりにアップスライド、理由があるのですか？私は混乱している。

任意のヒントは、事前に

おかげでいただければ幸いです。要素の高さを変えることにより

window.slide = function() { 
 
\t $('.item-1').slideUp(); 
 
}

.items-container { 
 
    height: 400px; 
 
    width: 240px; 
 
    background-color: #c3c3c3; 
 
    display: block; 
 
    /* overflow: hidden; */ 
 
} 
 

 
.item { 
 
    height: 100%; 
 
    width: 240px; 
 
    position: relative; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    vertical-alignment: middle; 
 
} 
 

 
.item-1 { 
 
    background-color: red; 
 
} 
 

 
.item-2 { 
 
    float: left; 
 
    position: relative; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="slide()"> 
 
Click me! 
 
</button> 
 

 
<div class="items-container"> 
 
    <div class="item item-1"> 
 
    1 
 
    </div> 
 
    <div class="item item-2"> 
 
    2 
 
    </div> 
 
</div>

Answer 1

jQueryのslideUp()とslideDown()の方法では、一致した要素の高さをアニメーション表示します。希望のような位置ではありません。http://api.jquery.com/slideUp/。

translatediv最初のものの上に移動するようにしてください。

http://www.w3schools.com/css/css3_2dtransforms.asp

window.slideUp = function() { 
 
\t $('.item-2').addClass('slideUp'); 
 
} 
 

 
window.slideDown = function() { 
 
\t $('.item-2').removeClass('slideUp'); 
 
}

.items-container { 
 
    height: 100px; 
 
    width: 240px; 
 
    background-color: #c3c3c3; 
 
    display: block; 
 
    /* overflow: hidden; */ 
 
} 
 

 
.item { 
 
    height: 100%; 
 
    width: 240px; 
 
    position: relative; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    vertical-alignment: middle; 
 
} 
 

 
.item-1 { 
 
    background-color: red; 
 
} 
 

 
.item-2 { 
 
    position: relative; 
 
    transition: transform linear 1s; 
 
    background-color: green; 
 
} 
 

 
.slideUp 
 
{ 
 
    transform: translate(0,-100%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="slideUp()"> 
 
SlideUp! 
 
</button> 
 
<button onclick="slideDown()"> 
 
SlideDown! 
 
</button> 
 

 
<div class="items-container"> 
 
    <div class="item item-1"> 
 
    1 
 
    </div> 
 
    <div class="item item-2"> 
 
    2 
 
    </div> 
 
</div>

Answer 2

.slideUp()作品。その要素が短くなると、次の要素がページの上に移動します。

.slideUp()方法は、マッチした要素の高さをアニメーション化：ドキュメントに見られるように

。これにより、ページの下部が滑り上がり、アイテムを隠すように見えます。

あなたのフィドルで

Answer 3

by the doc定義されているように、ITEM1が予想通りまでスライドして：

説明：スライド動作とマッチした要素を非表示にします。

したがって、divはスライドして消え、item2は「移動」しません。item1が非表示になった後、DOM内のスペースを埋めるだけです。