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

我尝试了什么：我尝试用复杂的公式替换marginLeft，或者用$（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”公式。

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

这是小提琴：http://jsfiddle.net/NB74E/

现在你看，在小屏幕尺寸上它不再居中了。 ：（

Answer 1

根据您的视口设置实现div的绝对中心（水平和垂直）的一种方法设置这些CSS proprietes（需要定义宽度和高度）：

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

以下是一个有效的例子：http://jsfiddle.net/QuwPE/5/

Answer 2

使用$(window).width()获取浏览器的宽度，然后根据该位置设置位置。

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