在 div 悬停时，悬停的 div 从屏幕外从左到右进行动画处理，并从左到右对隐藏在屏幕外的新 div 进行动画处理

Question

如何使用 Jquery 或 CSS3 将悬停的div（鼠标悬停在屏幕上）动画化到屏幕左侧并依次显示新div，这是问题的图像链接：http://i48.tinypic.com/f12z6.jpg

Answer 1

使用 CSS 3 过渡：

/* 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;        
}

假设标记如下所示：

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

演示

Answer 2

您可以使用 CSS3 的 Transform 属性执行此操作：

http://www.w3schools.com/cssref/css3_pr_transform.asp

您要做的是"翻译"div。 我可能会使用 jQuery 来添加转换类。