jQuery动画问题

Question

我正在尝试做的是在加载时将 Logo 放在屏幕中间，然后在 3 秒后将其设置为动画到屏幕顶部并让其余内容淡入。

这是我的 jQuery 代码:

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#slider-wrapper').hide();
            $("#logo").animate({ 
                bottom:'+=250px'
              }, 1500 );
            $('#slider-wrapper').fadeIn(2000);
            $('#slider').nivoSlider();
        });
</script>

所以 slider-wrapper 是(目前)我想要淡入的所有内容。

到目前为止，有谁能想到这个问题吗？目前， Logo 根本没有移动...

Answer 1

确保你的logo有一个absolute、relative或fixed位置，否则top、bottom、left 和 right 样式属性将无效。

此外，要让它按您想要的顺序发生，您需要在 .animate() 中进行淡入淡出。回调(因此它在动画完成时运行)，如下所示:

$('#slider-wrapper').hide();
$("#logo").animate({ bottom:'+=250px' }, 1500, function() {
  $('#slider-wrapper').fadeIn(2000);
});