[jQuery] 要素をアニメーションでスライドさせる方法

以前jQuery Gallery Pluginを作った時に、要素をアニメーションでスライドさせるのに手こずった覚えがあります。

Sliding door effect with JQuery
http://tutsvalley.com/wp/tutorials/sliding-door-effect-with-jquery/

» デモ

こちらはHTML,CSS,Javascript(jQuery)ともソースの全文が載っているチュートリアルです。

アニメーションで要素をスライドさせるためのポイントが非常にシンプルにまとめられています。

一番のキモはCSSかもしれません。
コンテナと画像のpositionをそれぞれ下記のように記述するのは、慣れていないと気づきにくいのではないでしょか。

.box_container{  
  position: relative;
}  
.box_image{  
  position: absolute; 
}

Javascriptの記述は本当に少なくてすみます。jQuery様々ですね。

// 横スライド
$(document).ready(function() {  
  $('.box_container').hover(function(){  
    var width = $(this).outerWidth();  
    $(this).find('.box_image').animate({left: width}, {queue:false, duration:300});
  }, function(){  
    $(this).find('.box_image').animate({left: '0px'}, {queue:false, duration:300});  
  });  
});

※ セレクタの書き方がちょい引っかかります » 参考