jQuery .animate() 第一次不起作用答案

【问题标题】：jQuery .animate() doesn't work on the first timejQuery .animate() 第一次不起作用
【发布时间】：2012-09-10 22:32:28
【问题描述】：

我正在制作一个“车库门”类型的东西来展示项目。有一个带有背景图像的 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);
});

});

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

【问题讨论】：

您正在制作动画的元素的起始“顶部”值是多少？

标签： jquery html jquery-animate slide

【解决方案1】：

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

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

【讨论】：