jquery - How do I slide content from top in a div?

Question

I have created a div by using references from the internet and its working fine... It's just that I wanted to know if I can bring in the other image from below rather than from above.

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)");
    });
});

Answer 1

为什么不直接使用jquery的slideup和slidedown呢？它还将为您处理 css。

进一步阅读：http: //api.jquery.com/category/effects/sliding/