向下移动一个苹果公司

Question

关于如何向下移动顶部苹果栏的任何想法？ （jQuery或其他库？）

示例：http://www.apple.com/ipad/guided-tours/

Answer 1

Apple使用CSS过渡，将它们放在您想要移动的元素上，然后动态地（例如使用javascript）更改您放置动画的CSS属性（例如，'top'）。等瞧。

较旧的浏览器不会显示动画，但这没关系，因为它不会破坏可用性。我们现在生活在渐进的增长时代。

• http://www.w3.org/TR/css3-transitions/
• https://developer.mozilla.org/en/CSS/CSS_transitions
• http://www.webkit.org/blog/138/css-animation/

Answer 2

您可以将jQuery的animate与top CSS属性一起使用。玩弄它，它可以做更多的事情:)。

或者，您可以使用FF3，Opera和Webkit（Chrome，Safari）支持的CSS3 Transitions。您可以在MDC上找到一些文档。您可以查看哪些浏览器支持here。

Answer 3

我喜欢CSS过渡方法，但我的实用主义者还记得顶部导航中的效果也可以通过jQuery轻松完成。

$(document).ready(function(){
   $("#nav").slideDown("fast");
});

http://api.jquery.com/slideDown/

要获得花哨的反弹效果，您需要另外包含带缓动方法的jQuery UI（在Effects Core中）。

$(document).ready(function(){
   $("#nav").slideDown("fast", "easeOutBounce");
});

http://jqueryui.com/download - 请务必加入效果核心

http://gsgd.co.uk/sandbox/jquery/easing/ - 这里记录了缓和方法