Transiciones de contenido geniales como en HTML5 bing

Question

Recientemente vi un buen efecto que se muestra en Bing para IE9 y también para Safari 5. Al presionar Enter en el cuadro de búsqueda, el cuadro de búsqueda se mueve hacia arriba y hacia arriba. los resultados se pliegan desde abajo. Puede verlo en acción aquí ... http://www.youtube.com/watch?v=NYuLALX6aeI#at=69

Mi pregunta es, ¿cómo se hace esto y cómo puedo hacer esto? Espero que puedas entender mi pregunta.

Answer 1

idea básica:

JQuery:

$('#go').click(function() { 
    $('#form').animate({ 
     'height': '80px', 
     'text-indent': '50px', 
     'padding-top':'20px' 
    }, { 
     queue: false, 
     duration: 1500, 
     complete:function(){ 
      $('html,body').css('overflow-y','visible'); 
     } 
    }); 
    $('#results').show({ 
     type: 'slide', 
     direction: 'up' 
    }, { 
     queue: false, 
     duration: 1500 
    }); 
}); 

CSS:

#form { 
    background-color:blue; 
    text-indent:300px; 
    width:100%; 
    height:100%; 
    padding-top:200px; 
} 

#results { 
    background-color:yellow; 
    display:none; 
    height:700px; 
} 
body, html { 
    width:100%; 
    height:100%; 
    overflow:hidden; 
} 

HTML:

<div id="form"> 
    <input type="text" /> 
    <input type="button" id="go" value="go" /> 
</div> 
<div id="results">Search results</div> 

Demostración: http://jsfiddle.net/AlienWebguy/hwAtU/

Answer 2

Todos ellos están utilizando la animación CSS3. Jugueteé un cuadro de búsqueda muy simple con animación here Utilice Chrome o Safari. Simplemente escriba algo y presione enter.

CSS

body{text-align:center; padding: 200px 0;-webkit-transition: all 0.4s linear;} 
#search{-webkit-transition: all 0.2s linear;} 
#search:focus{-webkit-transform:scale(1.4);} 

HTML

<input type="search" placeholder="Search..." id="search"/> 

JS:

document.getElementById('search').addEventListener('keydown', function(e){ 
    if(e.keyCode == 13){document.body.style.padding = "40px";} 
}, false); 

Uso de JavaScript para el posicionamiento y la animación no es un código semántico. La animación CSS es mucho más rápida y fluida.