2012-09-10 74 views
0

我正在制作一个“车库门”类型的东西来显示项目。有一个div(whole)与背景图像,然后另一个div(project_info),滑落下来的信息,涵盖了whole的背景图像。它的工作原理与我喜欢的完全相同,只是无论如何,动画都不会在第一次使用。所有3个元素(project_info,project_nameproject_desc)以相同的速度下滑时,应以不同的速度滑动。然而,每次之后,幻灯片都能正常工作。jQuery .animate()不能在第一次工作

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

});

可能重要的是要注意,悬停的mouseout部分将在第一次工作。

+0

什么是你正在动画元素的开始“最高”价值? –

回答

0

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

如果您使用的位置是:相对则内部跨度会以相同的速度移动作为包含div加上自己的速度。我试图通过设置div的高度而不是最高值来获得您要查找的结果。