jQueryアニメーションで他の要素を移動する方法

私は単純なjQueryウェブサイトを持っています。ここでは4つのブロックがあり、ブロックを押すと別のブロックがスライドします。しかし、ほとんどの場合、すべての作品は、私はそれを下に他の要素を移動するためにスライドアウトブロックを得ることができるかと思っていた。jQueryアニメーションで他の要素を移動する方法

$(document).ready(function() { 
 

 
    var height = 145; 
 
    var speed = 600; 
 
    $("#one").animate({ 
 
    width: "100%", 
 
    height: height 
 
    }, speed, function() { 
 
    $("#two").animate({ 
 
     width: "100%", 
 
     height: height 
 
    }, speed, function() { 
 
     $("#three").animate({ 
 
     width: "100%", 
 
     height: height 
 
     }, speed, function() { 
 
     $("#four").animate({ 
 
      width: "100%", 
 
      height: height 
 
     }, speed); 
 
     }); 
 
    }); 
 
    }); 
 

 
    $("#one").click(function() { 
 
    $(".dropDown").not("#oneS").slideUp(); 
 
    $("#oneS").slideToggle(); 
 

 
    }); 
 

 
    $("#two").click(function() { 
 
    $(".dropDown").not("#twoS").slideUp(); 
 
    $("#twoS").slideToggle(); 
 
    }); 
 

 
    $("#three").click(function() { 
 
    $(".dropDown").not("#threeS").slideUp(); 
 
    $("#threeS").slideToggle(); 
 
    }); 
 

 
    $("#four").click(function() { 
 
    $(".dropDown").not("#fourS").slideUp(); 
 
    $("#fourS").slideToggle(); 
 
    }); 
 

 

 
});

@charset "utf-8"; 
 
.selectors { 
 
    position: relative; 
 
    border-radius: 30px; 
 
} 
 
#one { 
 
    background-color: blue; 
 
    height: 400px; 
 
    width: 100px; 
 
    margin-bottom: 10px; 
 
} 
 
#two { 
 
    background-color: red; 
 
    height: 400px; 
 
    width: 100px; 
 
    margin-bottom: 10px; 
 
} 
 
#three { 
 
    background-color: yellow; 
 
    height: 400px; 
 
    width: 100px; 
 
    margin-bottom: 10px; 
 
} 
 
#four { 
 
    background-color: green; 
 
    height: 400px; 
 
    width: 100px; 
 
} 
 
.dropDown { 
 
    background-color: #E9E9E9; 
 
    height: 300px; 
 
    width: 100%; 
 
    position: absolute; 
 
    //overflow:auto; 
 
    border-radius: 10px; 
 
    z-index: 1; 
 
} 
 
#oneS { 
 
    display: none; 
 
    top: 150px; 
 
} 
 
#twoS { 
 
    display: none; 
 
    top: 150px; 
 
} 
 
#threeS { 
 
    display: none; 
 
    top: 150px; 
 
} 
 
#fourS { 
 
    display: none; 
 
    top: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 

 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <script type="text/javascript" src="jQuery.js"></script> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 

 
    <div id="one" class="selectors"> 
 
    <div id="oneS" class="dropDown"></div> 
 
    </div> 
 

 
    <div id="two" class="selectors"> 
 
    <div id="twoS" class="dropDown"></div> 
 
    </div> 
 

 
    <div id="three" class="selectors"> 
 
    <div id="threeS" class="dropDown"></div> 
 
    </div> 
 

 
    <div id="four" class="selectors"> 
 
    <div id="fourS" class="dropDown"></div> 
 
    </div> 
 

 
</body> 
 

 
</html>

4ブロック：