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
horizontal sliding left
diagonal sliding bottomRight
vertical sliding partialLeft
vertical sliding secondRaise
diagonal sliding secondBottomRight
diagonal sliding secondBottomLeft
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 》
