jquery - 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

あなたが探しているのは、divを「変換」することです。おそらくjQueryを使用して変換クラスを追加します。

Answer 2

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>

デモ