jquery - div でコンテンツを上からスライドするにはどうすればよいですか?

Question

インターネットからの参照を使用して div を作成しましたが、正常に動作しています...上からではなく下から他の画像を取り込むことができるかどうかを知りたかっただけです。

HTML

<div id="slide1_container" class="shadow">
    <img src="images/Turtle.jpg" id="one"/>
    <img src="images/Windows Logo.jpg" id="two" />
</div>
</div>

CSS

#slide1_container {
  width:450px;
  height:281px;
  overflow:hidden; /* So the sliding bit doesn't stick out. */
}

#one {
  padding:0;
  margin:0;
  float:left;
}

#two {
  padding:0;
  margin:0;
  float:left;
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  transition:all 0.5s ease;
  z-index:1;
}

Javascript

$(document).ready(function() {
  $('#slide1_container').mouseover(function(){
    $("#two").css("transform","translateY(-281px)");
    });
});
$(document).ready(function() {
  $('#slide1_container').mouseout(function(){
    $("#two").css("transform","translateY("+$(this).index() * -281+"px)");
    });
});