Question

How can I make using Jquery or CSS3 to animate a hovered div (on mouse over) to the left off screen and show up new divs one under other, here is a image link of the problem:
http://i48.tinypic.com/f12z6.jpg

Answer 1

With CSS 3 transitions:

/* out of view on hover */
.container:hover .hoverMe{
  margin-left: -200px;           
}

/* bring other DIVS inside view when mouse is over container */
.container:hover ~ .slidingOne{
  margin-left: 0;                
}

.hoverMe, .slidingOne{  
  transition: margin 1s;       
}

.slidingOne{
  margin-left: -200px;        
}

Assuming the markup looks like this:

<div class="container">
  <div class="hoverMe"> 
    ...
  </div>
</div>    

<div class="slidingOne">
  ...
</div>

<div class="slidingOne">
  ...
</div>

DEMO