javascript - Putting two divs on the same row via relative positioning -


i'm trying create animation on site when user clicks link, site shifts main content div off page left, , new content (which corresponds clicked link) flies open spot right. original content block gets deleted after animation completes.

i have down, , i've done far use relative positioning , jquery animate movement of divs.

specifically, if block a original div, , block b replacement div,

  1. create b , position off right side of screen setting left:100%
  2. use jquery animate right:100% on a send a off left side of screen
  3. use jquery fly in b right animating left:0%

the problem after these new styles set, there still empty area a was, , b below empty space. how push b space?

short answer: believe missing position:absolute on a , b.

long answer: if define container position:relative, newly created elements position:absolute positioned within bounding box of container. @ point can stick 2 elements 1 next each other said: a on left:0 , b on left:100%. can animate both changing left value: a goes off screen left:-100% , b slides in left:0 (which same position of @ previous step).

you can see in action here -> http://jsfiddle.net/mvxwt/


Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -