Déplacement vers le bas d'un div ala Apple

Question

des idées sur la façon de descendre une div comme la barre de pomme en haut? (JQuery ou autres libs?)

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

Answer 1

Apple utilise des transitions CSS, les place sur l'élément que vous voulez déplacer et ensuite dynamiquement (avec javascript par exemple) changez la propriété CSS sur laquelle vous avez placé l'animation ('top' par exemple). Et voilà.

Les navigateurs plus anciens n'afficheront pas l'animation, mais ce n'est pas grave car cela ne détruira pas la convivialité. Nous vivons dans l'âge d'amélioration progressive de nos jours.

• 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

Vous pouvez utiliser animate jQuery avec la propriété top CSS. Joue avec, ça peut faire beaucoup plus que ça :). Vous pouvez également utiliser CSS3 Transitions, qui est pris en charge dans FF, Opera et Webkit (Chrome, Safari). Vous pouvez également utiliser les transitions CSS3. Vous pouvez trouver quelques documents par exemple sur MDC. Vous pouvez vérifier quels navigateurs le supportent here.

Answer 3

J'aime la méthode des transitions CSS mais le pragmatiste me rappelle l'effet de la barre de navigation supérieure tomber dans peut également être fait facilement avec jQuery.

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

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

Pour obtenir un effet de rebond de fantaisie, vous aurez besoin d'inclure plus jQuery UI avec des méthodes facilitant (en effets internes).

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

http://jqueryui.com/download - assurez-vous d'inclure les effets de base

http://gsgd.co.uk/sandbox/jquery/easing/ - Les méthodes d'assouplissement sont documentées ici