Question

我正在制作一个“车库门”类型的东西来展示项目。有一个div（whole）带有背景图片，然后是另一个div（project_info），它会向下滑动信息，覆盖whole的背景图像。它完全按照我的喜好工作，除了无论如何，动画第一次都无法工作。当它们以不同的速度滑动时，所有3个元素（project_info，project_name和project_desc）以相同的速度向下滑动。不过，每次之后，幻灯片都会起作用。

HTML：

<div class="whole" style="background-image: url('rail.jpg');">
  <div class="project_info">
    <span class="project_name">Rail Direct</span>
    <span class="project_desc">Lorem ipsum dolor sit amet</span>
  </div>

jQuery的：

 <script type="text/javascript">
$(document).ready(function(){
$(".whole").hover(function() {
  $('.project_info').stop().animate({"top": "0px"}, 300);
  $('.project_name').stop().animate({"top": "0px"}, 1000);
  $('.project_desc').stop().animate({"top": "0px"}, 650);
},
function() {
  $('.project_info').stop().animate({"top": "-155px"}, 800);
  $('.project_name').stop().animate({"top": "-155px"}, 300);
  $('.project_desc').stop().animate({"top": "-155px"}, 650);
});

}）;

可能需要注意的重要一点，悬停的鼠标输出部分将首次运行。

Answer 1

看看http://jsfiddle.net/qG5Hh/1/

如果您使用position：relative，那么内部跨度将以与包含div相同的速度加上它们自己的速度。我试图通过设置div的高度而不是顶部值来获得您正在寻找的结果。

jQuery .animate（）第一次不起作用

1 个答案: