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

Answer 1

为什么不用jquery的slideup和slidedown呢？它还会为您处理 CSS。

在这里进一步阅读:http://api.jquery.com/category/effects/sliding/