0

我正在制作一个“车库门”类型的东西来展示项目。有一个whole带有背景图像的 div()，然后是另一个project_info带有信息的 div() 向下滑动，覆盖 的背景图像whole。它完全按照我喜欢的方式工作，只是无论如何，动画第一次都不会工作。所有 3 个元素 (和) 以相同的速度向下滑动，而它们应该以不同的速度滑动project_info。但是，每次之后，幻灯片都会起作用。project_nameproject_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);
});

});

可能需要注意的是，悬停的鼠标悬停部分将在第一次工作。

4

1 回答 1

0

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

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

于 2012-09-10T22:52:28.957 回答