Moving down a div ala Apple

any ideas on how to move down a div like the apple bar at the top? (jQuery or other libs?)

开发者_开发问答

Example: http://www.apple.com/ipad/guided-tours/

---

Apple uses CSS transitions, put them on the element you want to move and then dynamically (with javascript for example) change the CSS property you have put the animation on ('top' for example). Et voila.

Older browsers won't show the animation, but that's okay as it won't destroy usability. We're living in the progressive enhancement age nowadays.

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

---

You can use jQuery's animate with the top CSS property. Play around with it, it can do much more than that :).

Alternatively, you can use CSS3 Transitions, which is supported in FF, Opera and Webkit (Chrome, Safari). You can find some docs for example on MDC. You can check which browsers support it here.

---

I like the CSS transitions method but the pragmatist in me remembers the effect of the top navigation dropping in can also be easily done with jQuery.

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

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

To get a fancy bounce effect you will need to additionally include jQuery UI with easing methods (in Effects Core).

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

http://jqueryui.com/download - be sure to include Effects Core

http://gsgd.co.uk/sandbox/jquery/easing/ - The easing methods are documented here