w/jQueryで動作する.animate（）を取得できません

Question

アイテムを非表示にしたオーバーフローdivがあります。私は、UP/DOWN要素のクリックに隠された領域をスクロールしたいと思います：

$("#up").click(function(){ 
    $("#container").find(".box:first").animate({"top": "+=20px"}, "slow"); 
}); 
$("#down").click(function(){ 
    $("#container").find(".box:first").animate({"top": "-=20px"}, "slow"); 
}); 

<style> 
#itemsList { 
    height:60px; 
} 
.box { 
    height:20px; 
} 
</style> 

<div id="container">       
    <div id="up" class="scroll">UP</div> 
    <div id="itemsList"> 
     <div id="item1" class="box">item 1</div> 
     <div id="item2" class="box">qweqweqwe</div> 
     <div id="item3" class="box">qqqqqqqq</div> 
     <div id="item4" class="box">eeeeeee</div> 
     <div id="item5" class="box">rrrrrrrr</div> 
     <div id="item6" class="box">tttttt 11</div> 
    </div> 
    <div id="down" class="scroll">DOWN</div> 
</div> 

私が欠けているのかわからないが...ここに私のJSfiddleです。

Answer 1

jQueryセレクタをfind('.box:first')からfind('.box')に変更してから、position: relative;をCSSの.boxクラスに追加するだけです。