jQuery动画从屏幕外淡入div，保持居中一定时间然后再次淡出

Question

我已经在谷歌上搜索了大约一个小时，但找不到解决方案，所以我会在这里提问。

首先，我是 jQuery 的新手，所以请多多包涵。

我想做的事情:

我想要一个 div 从屏幕(左)飞到屏幕中间，在那里停留几秒钟，然后飞到右边，再次飞出屏幕(然后它完全消失)

我的问题是我不完全理解如何根据视点将 div 居中。

这是我目前的工作

$('#flashes')
    .css('margin-left',-$(this).width())
    .animate({
         marginLeft: 0
    }, 1500)
    .delay(7000)
    .css('margin-right',-$(this).width())
    .animate({
      marginLeft: 5000 
    }, 1500, 
    function(){$('#flashes').remove();}
);

这很好用，只要我的浏览器大小合适 :D(因此直到一个小时前我才偶然发现这个错误)

CSS(以防干扰):

#flashes {
    min-height: 30px; width: 960px;
}

我尝试了什么:我尝试用复杂的公式或简单的公式(例如 $(this).width()/4 )替换 marginLeft 以让它在屏幕的 25% 上开始，但这全是废话(我发现靠我自己 *g*)。我只是想让 div 从无处滑入，一直滑到中间，然后在 7 秒后消失。

编辑

$('#flashes')
  .css('margin-left',-$(this).width())
  .animate({
      'left': '50%',
      'margin-left': $(this).width() / 4
  }, 1500)
  .delay(7000)
  .css('margin-right',-$(this).width())
  .animate({
    marginLeft: $(window).width() 
  }, 1500, 
  function(){$('#flashes').remove();}
);

这适用于全屏 (1920*1200px) 但不再适用于半屏 :(我想我需要将窗口大小放入“margin-left”公式中。

但除此之外，这正是我想要的。

这是 fiddle :http://jsfiddle.net/NB74E/

现在你看，在小屏幕上它不再居中了。 :(

Answer 1

一种实现 div 绝对中心(水平和垂直)的方法取决于您的视口(viewport)设置这些 CSS 属性(需要定义宽度和高度):

div {
position: absolute;
top: 50%;
left: 50%;
margin-top:-divHeight/2;
margin-left:-divWidth/2;
}

这是一个工作示例:http://jsfiddle.net/QuwPE/5/