私が書いたオルガンの効果
14214 ワード
まずdemoを見て
メソッド接尾辞が必要な場合は、閉パッケージに戻り値return thisを与えます.
body, dl, dd, ul, li { margin: 0; padding: 0 }
dl { width: 500px; margin: 0 auto; overflow: hidden }
dt { border-radius: 10px; background: gray; color: #FFF; padding: 10px; margin: 2px 0; cursor: default; transition: background 1s }
dd { border-radius: 10px; padding: 0 20px; background: #eee; height: 0; overflow: hidden; }
dt:hover { background: #bbb }
dd.first { height: auto }
ul { list-style: none }
<dl id="test1">
<dt> 1</dt>
<dd class="first">
<ul>
<li>111111</li>
<li>111111</li>
<li>111111</li>
</ul>
</dd>
<dt> 2</dt>
<dd>
<ul>
<li>222222</li>
<li>222222</li>
<li>222222</li>
</ul>
</dd>
<dt> 3</dt>
<dd>
<ul>
<li>3333333</li>
<li>3333333</li>
<li>3333333</li>
</ul>
</dd>
<dt> 4</dt>
<dd>
<ul>
<li>4444444</li>
<li>4444444</li>
<li>4444444</li>
</ul>
</dd>
<dt> 5</dt>
<dd>
<ul>
<li>5555555</li>
<li>5555555</li>
<li>5555555</li>
</ul>
</dd>
<dt> 6</dt>
<dd>
<ul>
<li>6666666</li>
<li>6666666</li>
<li>6666666</li>
</ul>
</dd>
</dl>
(function($){
$.fn.sfq=function(options){
var defaults={
width:500
},
options=$.extend(defaults,options);
var $sfq=$(this);
$sfq.width(options.width);
var dt=$sfq.children("dt");
var dd=$sfq.children("dd");
dt.hover(function(){
var index=dt.index(this);
this.timer=setTimeout(function(){
var dHeight=dt.eq(index).next().find("ul").height();
dt.eq(index).next().animate({"height":dHeight},500)
.siblings("dd").animate({"height":"0px"},500);
},300);
},function(){
clearTimeout(this.timer)
})
}
})(jQuery)
$(function(){
$("#test1").sfq({"width":"300"})
})
メソッド接尾辞が必要な場合は、閉パッケージに戻り値return thisを与えます.