jQuery - plugin layerSlide:humming bird

jQueryの要素をslideさせるプラグインを作ってみた。

jQueryでスライドさせるのは簡単にできるので、animate のラッパー的な感じで便利に使えたらイイかな。

実験的な意味合いも込めて、「どうしたら使いやすくなるか」という点での反省も含めて今後に活かせたら幸い的なモノです。

関係する要素は3つ。

親要素を指定して、子要素が一つ存在する必要がある。
その第一子要素と引数として第二子要素を渡し、この二つがスライドする対象になる。

Option

使用できるオプションは以下の通り。

duration:300, // animate speed
easing:'swing', // animate easing
bgColor:'#000', //second layer background color
opacity:0.8, // second element opacity
color:'#eee', // second element color
margin:'10px', // second element margin
textAlign:'left', // second element text-align
height:'original', // second element height
width:'original', // second element width
bgImage:'none', // second element background-image
effect:'down' //default slide animate

面倒なのでソースからコピペしてしまった。
つまり、オプションのデフォルトは以上の通り、ということになる。

動作確認は以下にて。

demo:Fiat 500 photostream

vertical sliding down

imgのalt属性を取得して表示しています。

alt属性を表示する

alt属性を表示するのも簡単。
以下のようにalt属性を取得して第二引数として渡してやるだけ。

$('.target').layerSlide({
 effect:'secondBottomLeft'
 },$('<p>').text($('img','.target').attr('alt')).get(0));

問題点

window.onloadの後でないと要素のサイズを正しく取得できないので、使用するには一手間必要。

使用例

(function(fn){
 if (window.addEventListener) {
  window.addEventListener('load', fn, false);
 }
 else 
  if (window.attachEvent) {
   window.attachEvent('onload', fn);
  }
})(function(){
 $('#target').layerSlide({effect:'down'},$('#target-desc').get(0));
});

このようにwindowのonloadイベントに登録する形になる。

《 Download:layerSlide 》