在div悬停动画上悬停的div从左到右关闭屏幕并动画新的div从左到右隐藏在屏幕外

Question

如何使用Jquery或CSS3将悬停的div（鼠标悬停）设置为左侧屏幕并在其他屏幕下显示新的div，这是问题的图像链接： http://i48.tinypic.com/f12z6.jpg

Answer 1

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

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

你要做的是＆＃34;翻译＆＃34; divs。我可能会使用jQuery来添加转换类。

Answer 2

使用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;        
}

假设标记看起来像这样：

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

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

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

DEMO