search phpbb-phpbb-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut
¥¨¥ó¥È¥ê¥¤No.731 ¤Ë¤ª¤¤¤Æ¡¢slideToggleEx ¼«ºî¥×¥é¥°¥¤¥ó¥á¥½¥Ã¥É¤Ë¤Ä¤¤¤Æ¾Ü½Ò¤·¤Þ¤·¤¿¡£
¤È¤³¤í¤¬¡¢¤½¤³¤Ç¾Ò²ð¤·¤¿¥×¥é¥°¥¤¥ó¥á¥½¥Ã¥É¥³¡¼¥É¤ÏÉÔ´°Á´¤Ç¤·¤¿¡£±£ÊþõÂÖ¤«¤éµ¯Æ°¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥óÂбþ¤òÁ´¤¯¹Íθ¤·¤Æ¤¤¤Ê¤«¤Ã¤¿¤Î¤Ç¡¢¤½¤Î¾õÂ֤ǵ¯Æ°¤¹¤ë¤È»×¤ï¤Ìư¤¤ò¤·¤Æ¤·¤Þ¤¦¤Î¤Ç¤¹¡£¤Ä¤Þ¤ê¡¢¼Â¤ÏȾʬ¤·¤«´°À®¤·¤Æ¤¤¤Ê¤¤¤Î¤Ç¤·¤¿¡£¡Ê¡°¡°¡¨¡¨¡¡¥Ò¥ä¥¢¥»
¤½¤Î¤³¤È¤Ëµ¤¤¬¤Ä¤¤¤¿¤Î¤Ï 9 ·îÃæ½Ü¡£¤½¤Î»þÅÀ¤«¤é¡¢²þ¤á¤Æ¥³¡¼¥ÉÁ´ÂΤò¸«Ä¾¤µ¤¶¤ë¤òÆÀ¤Ê¤¯¤Ê¤ê¡¢²þ¤á¤Æ animate ¥á¥½¥Ã¥É¤ÎºÆ³Ø½¬¤òÇ÷¤é¤ì¤¿¤Î¤Ç¤¹¡£
¤½¤Î¸å°ì¥ö·î;¤ê¡£»Í¶ìȬ¶ì¡¢¼·Å¾¤ÓȬµ¯¤¤ò·«¤êÊÖ¤·¤¿Ëö¤Ë¡¢ºòÈÕ¤ä¤Ã¤È±£ÊþõÂÖ¤«¤é¤Îµ¯Æ°¤Ë¤âÂбþ¤·¤¿ slideToggleEx ÈǤ¬´°À®¤·¤¿¤Î¤Ç¡¢¤³¤³¤ËÅê¹Æ¤¹¤ë¤³¤È¤Ë¤·¤Þ¤¹¡£
n ¤Ïµ¯½ªÅÀ¤ò°ÕÌ£¤·¼¡¤ÎÄ̤ê¤Î°ÕÌ£¤ò»ý¤Á¤Þ¤¹¡£
0¡§¥Ü¥Ã¥¯¥¹¤ÎÃæ¿´¡¢1¡§º¸¾åü¡¢2¡§±¦¾åü¡¢3¡§±¦²¼Ã¼¡¢4¡§º¸²¼Ã¼¡¢
5¡§¾åÊÕ¡¢6¡§±¦ÊÕ¡¢7¡§²¼ÊÕ¡¢8¡§º¸ÊÕ
¤³¤ì¤À¤±ÀßÄꤹ¤ì¤Ð¡¢¥È¥ê¥¬¡¼¤Ç¤¢¤ë button ¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È¡¢n ¤Ç»ØÄꤷ¤¿°ÌÃÖ¤òµ¯½ªÅÀ¤È¤·¤Æ¡¢¥È¥ê¥¬¡¼¥Ü¥¿¥ó¤Îľ¸å¤ËÇÛÃÖ¤µ¤ì¤¿Í×ÁǤ¬ slideToggleEx ŬÍÑÂоÝÍ×ÁǤȤʤꡢ±£Ê䵤줿¤êɽ¼¨¤µ¤ì¤ë¤è¤¦¤Ê¥³¡¼¥É¡Ê ¥¨¥ó¥È¥ê¥¤ËöÈø¤Ë·ÇºÜ ¡Ë¤ò½ñ¤¤Þ¤·¤¿¡£
¡Ö ¤³¤ì¤À¤± ¡×¤È¸À¤Ã¤Æ¤â·ë¹½¤¿¤¯¤µ¤ó¤¢¤ë¤¿¤á¡¢ºÇ½é¤ÏÌÌÅݤ˴¶¤¸¤Þ¤¹¤¬¡¢Ä¾¤°¤Ë´·¤ì¤Þ¤¹¤·¡¢¼ÂºÝ¤Ë»È¤Ã¤Æ¤ß¤ë¤È·è¤·¤ÆÂçÊѤʼê´Ö¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¡£
¾å¤Î 5 ¤Ä¤À¤±¤Ç¡¢slideToggleEx ¥×¥é¥°¥¤¥ó¤¬´Êñ¤Ë»È¤¨¤ë¤è¤¦¤Ë¤¹¤ë¤¿¤á¤Ë¡¢¤â¤¦£±¤Ä³ºÅöÉôʬ¤Î HTML ʸ¤òÆÃÊ̤ʹ½Â¤¤Ë¤¹¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£¤³¤ì¤¬ 6 ¤ÄÌܤˤ·¤ÆºÇ¸å¤ÎÍ×·ï¤È¤Ê¤ê¤Þ¤¹¡£¤½¤ÎÍ×·ï¤È¤Ïµ¯Æ°¥Ü¥¿¥ó¤Îľ¤°¸å¤Ë slideToggleEx ÂоÝÍ×ÁǤ¬¤¢¤ë¤È¤¤¤¦¤³¤È¤Ç¤¹¡£
¤½¤¦¤Ç¤Ê¤¤¾ì¹ç¤Ë¤Ï ¸Ä¡¹¤Ë slideToggleEx ¥á¥½¥Ã¥É¤ò¸Æ¤Ó½Ð¤¹¥³¡¼¥É¤ò½ñ¤¯¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
³ºÅöÉôʬ¤Î HTML ¤ò°Ê²¼¤Î¤¤¤º¤ì¤«¤Ë¤¹¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£¡Ê¤¤¤º¤ì¤Î¥±¡¼¥¹¤â¥Ü¥Ã¥¯¥¹¤Îº¸¾å¤òµ¯½ªÅÀ¤È¤¹¤ë¾ì¹ç¤ÇÎ㼨¤·¤Þ¤¹¡£¡Ë
¢£¥±¡¼¥¹ 1 <div><button class="fireSlideToggleEx-1">µ¯Æ°¥Ü¥¿¥ó</button></div> <div>¡¦¡¦¡¦slideToggleExÂоÝÍ×ÁÇ¡¦¡¦¡¦</div> ¢£¥±¡¼¥¹ 2 <button class="fireSlideToggleEx-1" style="display:block;width:120px;">µ¯Æ°¥Ü¥¿¥ó</button> <div>¡¦¡¦¡¦slideToggleExÂоÝÍ×ÁÇ¡¦¡¦¡¦</div> ¢¨ 2 ¹ÔÌܤΠdiv Í×ÁǤÏÊÌ¤Ë div ¤Ç¤Ê¤¯¤Æ¤â¥Ö¥í¥Ã¥¯Í×ÁǤʤé¤Ð²¿¤Ç¤â¹½¤¤¤Þ¤»¤ó¡£
¥±¡¼¥¹ 1 ¤Ï°ìÈÌŪ¤Ê button ¥¿¥°¤Î»È¤¤Êý¤Î¾ì¹ç¤Ç¤¹¡£¤Ä¤Þ¤ê button ¥¿¥°¤ò inline Í×ÁǤȤ·¤ÆÇÛÃÖ¤¹¤ë¾ì¹ç¤Î HTML ʸ¤Ç¤¹¡£¤³¤Î¾ì¹ç¤Ë¤Ï button ¥¿¥°¤Î¿ÆÍ×ÁǤΠnext sibling ¥Ö¥í¥Ã¥¯Í×ÁǤ¬ slideToggleEx ¥á¥½¥Ã¥É¤ÎŬÍÑÂоݤȤʤë¤è¤¦¤Ë¥³¡¼¥É¤òºî¤ê¤Þ¤·¤¿¡£
°ìÊý¥±¡¼¥¹ 2 ¤Ï button ¥¿¥°¤ò¥Ö¥í¥Ã¥¯Í×ÁǤȤ·¤ÆÇÛÃÖ¤¹¤ë¾ì¹ç¤Ç¤¹¡£¤³¤Î¾ì¹ç¤Ë¤ÏÅö³º¤Î¥Ü¥¿¥ó¥¿¥°¤Î next sibling ¥Ö¥í¥Ã¥¯Í×ÁǤ¬ slideToggleEx ¥á¥½¥Ã¥É¤ÎŬÍÑÂоݤȤʤë¤è¤¦¤Ë¥³¡¼¥É¤òºî¤ê¤Þ¤·¤¿¡£
¤³¤Î¤è¤¦¤ÊÅöÁ³¤È»×¤ï¤ì¤ëHTMLʸ¹½À®¤Ë¤·¤Æ¤ª¤±¤Ð¡¢±¿ÍѤËÅö¤¿¤Ã¤Æ¤É¤Î¤è¤¦¤Ë¤·¤¿¤«¤ò»×¤¤½Ð¤¹¤Î¤âÍÆ°×¤Ç¤¹¤·¡¢²¾¤Ë¹½Â¤¤ò˺¤ì¤Æ¤âľ´¶Åª¤Ë»×¤¤½Ð¤¹¤³¤È¤¬²Äǽ¤È¤Ê¤ê¤Þ¤¹¡£
¥¢¥Ë¥á·Ñ³»þ´Ö¤È easing ´Ø¿ô¤Ï¡¢¸å½Ò¤¹¤ë ¡Ö click ¥¤¥Ù¥ó¥È¤òÅÐÏ¿¤· slideToggleEx ¥á¥½¥Ã¥ÉŬÍÑÂоݤò¥Ô¥Ã¥¯¥¢¥Ã¥×¤¹¤ë¥³¡¼¥É ¡× ¤Ë¤ª¤¤¤Æ¡¢1 ÉäËÀßÄꤷ¡¢easing ¤Ï̵»ØÄê¤È¤·¤Æ¤¤¤Þ¤¹¡£¤³¤Î¥³¡¼¥É¤òÏ®¤ì¤Ð¼«ºß¤Ë·Ñ³»þ´Ö¤È easing ´Ø¿ô¤ÏÊѹ¹¤Ç¤¤Þ¤¹¤¬¡¢»È¤¦ºÝ¤Ë¤½¤ÎÅÔÅÙ duration ¤È easing ´Ø¿ô¤òÊѹ¹¤¹¤ëɬÍפϤʤ¤¤È¹Í¤¨¡¢(1) ¥È¥ê¥¬¡¼¤È¤Ê¤ë¥Ü¥¿¥ó¥¿¥°¤È (2) slideToggleEx ÂоݤΥ֥í¥Ã¥¯¥¿¥°¡¢µÚ¤Ó (3) slideToggleEx-n ¥¯¥é¥¹Ì¾¤ò»ØÄꤹ¤ë¤À¤±¤Ç»È¤¨¤ì¤Ð¤è¤¤¤ÈȽÃǤ·¤Þ¤·¤¿¡£
°Ê²¼¤Ë·ÇºÜ¤·¤¿¥³¡¼¥É¥ê¥¹¥È¤Îɽ¼¨¤È±£Êäˤϡ¢ÅöÁ³ slideToggleEx ¤òŬÍѤ·¤Æ¤¤¤Þ¤¹¡£Ä¾²¼¤Î¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È¡¢ slideToggleEx ¥á¥½¥Ã¥É¤¬µ¯Æ°¤·¡¢¥¢¥Ë¥áÂоÝÍ×ÁǤǤ¢¤ë¥³¡¼¥É¥ê¥¹¥È¤¬Åö³ºÍ×ÁǤα¦¾å¤«¤éŸ³«¤·¡¢ºÆ¤Ó¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È±¦¾å¤Ø±£Ê䵤ì¤Þ¤¹¡£¡Ê µ¯½ªÅÀ¡á 2 ¡Ë
¥³¡¼¥É¤Ë¤Ï³Æ¹Ô¤Ë¾ÜºÙ¤ÊÀâÌÀ¤òµ½Ò¤·¤¿¤Î¤Ç¡¢²¿¤ò¹Ô¤Ã¤Æ¤¤¤ë¤Î¤«Ê¬¤«¤ë¤È»×¤¤¤Þ¤¹¡£
¢£¥×¥é¥°¥¤¥ó slideToggleEx() ¥á¥½¥Ã¥É¥³¡¼¥É¡Ê´°Á´ÈÇ¡Ë
0:// jQuery plugin : slideToggleEx() Release at 2009.8.21, ver 1.1:9.9, 1.3TheLastVer:10.9 01:00am
1:(function($){
¡¡¡¡// ¥¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥É¤ÎÀ³Ê¤ò´Êñ¤Ëµ½Ò¤·¤Æ¤ª¤¯
2:var ver="relative animation under position relative";
¡¡¡¡// ¥×¥é¥°¥¤¥ó»ØÄê
3:$.fn.slideToggleEx = function( type, duration, easing, fn ){
4:¡¡if (type > 8) // ¥¨¥é¡¼Âнè
5:¡¡¡¡(function(){
6:¡¡¡¡¡¡alert("Âè 1 °ú¿ô¤Ï 0¡Á8 ¤À¤±¤¬»ØÄê¤Ç¤¤Þ¤¹¡£\n¤ä¤êľ¤·¤Æ¤¯¤À¤µ¤¤¡£
¡¡¡¡¡¡¡¡\n"+"slideToggleEx( 0¡Á8, ·Ñ³»þ´Ö, easing´Ø¿ô, ¥¢¥Ë¥á¸å¼Â¹Ô´Ø¿ô )"); return;
7:¡¡¡¡})();
¡¡¡¡¡¡// ÊÑ¿ôÀßÄê¡¢½é´üÃÍÊ£¼Ì
8:¡¡var $target = this, o = $.extend({},$.fn.slideToggleEx.opts);
¡¡¡¡¡¡// 9 ¡Á 23 ¹Ô¤Ï¡¢o ¥ª¥Ö¥¸¥§¥¯¥È¤Ëtarget¤È¥×¥í¥Ñ¥Æ¥£¤¬¤Ê¤¤¾ì¹ç¡¢
¡¡¡¡¡¡ * ¤Þ¤¿¤Ï¥¿¡¼¥²¥Ã¥È¤¬°Û¤Ê¤Ã¤¿¾ì¹ç¡¢¤Ä¤Þ¤ê½é¤á¤Æ¤½¤Î¥¤¥ó¥¹¥¿¥ó¥¹¤«¤é¸Æ¤Ð¤ì¤¿¤«¡¢
¡¡¡¡¡¡ * ¥¤¥ó¥¹¥¿¥ó¥¹¤¬ÊѤï¤Ã¤¿¾ì¹ç¤Ëµ¯Æ°¤µ¤ì¤ë¡£
¡¡¡¡¡¡ * ¤³¤Î¥Ö¥í¥Ã¥¯¤Ï¥¢¥Ë¥áÂоݤËÂФ·¤ÆÍÍ¡¹¤Ê½é´ü²½¤ò¹Ô¤¦¡£
¡¡¡¡¡¡ */
9:¡¡if(!o.target || o.target[0]!==$target[0]) {
10:¡¡¡¡$.extend(o,{
11:¡¡¡¡¡¡orig : o, // ÅöÌ̻Ȥï¤Ê¤¤¤¬Ç°¤Î¤¿¤á¤Ë o ¤ò¥Ð¥Ã¥¯¥¢¥Ã¥×
12:¡¡¡¡¡¡target : $target,
13:¡¡¡¡¡¡el : $target[0], // ¥¢¥Ë¥áÂоݥΡ¼¥É¤Ø¤Î»²¾È¤ò¼èÆÀ
14:¡¡¡¡¡¡type : type,
15:¡¡¡¡¡¡initstate : !$target.is(":hidden"), // ¥¢¥Ë¥áÁ°¤Î¾õÂÖ¤¬±£Êä«É½¼¨¤«
16:¡¡¡¡¡¡cnt : 1 // ¥¤¥ó¥¹¥¿¥ó¥¹Ëè¤Îµ¯Æ°²ó¿ô¥«¥¦¥ó¥¿¡¼
17:¡¡¡¡});
¡¡¡¡¡¡¡¡// ¥¢¥Ë¥áÂоݤ¬ÀÚ¤êÂØ¤ï¤ê¡¢ºÆ¤Ó¤¢¤ë¥¤¥ó¥¹¥¿¥ó¥¹¤Ë slideToggleEx ¥á¥½¥Ã¥É¤¬
¡¡¡¡¡¡¡¡// ŬÍѤµ¤ì¤¿»þ¤Ë¤Ï¡¢ºÇ½é¤Ë¸Æ¤Ó½Ð¤µ¤ì¤¿»þ¤ÎÀßÄê¤òºÆÍøÍѤǤ¤ë¤è¤¦¤Ë data
¡¡¡¡¡¡¡¡// ¥á¥½¥Ã¥É¤ò³èÍѤ·¤Æ¥³¡¼¥É¿Ê¹Ô¤Î¸úΨ²½¤ò¿Þ¤ë¡£
¡¡¡¡¡¡¡¡// ¤Þ¤¿ o ¥ª¥Ö¥¸¥§¥¯¥È¤Ë¥¢¥Ë¥áÂоÝÍ×ÁÇÅù¤Î¥µ¥¤¥º¤Ë·¸¤ë¥×¥í¥Ñ¥Æ¥£¤òÄɲ乤롣
18:¡¡¡¡$.extend(o, $.data(o.el,"initdone") || getSize());
¡¡¡¡¡¡¡¡// ¥¢¥Ë¥áÂоݥΡ¼¥É¤Î¸ÇÍ style Ãͤò¼èÆÀ¤¹¤ë¡£
19:¡¡¡¡for (var p in o.cssdefault.H) o.cssOrig.H[p] = $.css(o.el,p,true);
20:¡¡¡¡for (var p in o.cssdefault.W) o.cssOrig.W[p] = $.css(o.el,p,true);
¡¡¡¡¡¡¡¡// ¾å¤Î¥á¥½¥Ã¥É¤Ç¤Ïñ°Ì¤¬ÉÕ¤«¤Ê¤¤¤Î¤ÇÉÕÍ¿¤¹¤ë¡£
21:¡¡¡¡o.cssOrig.H.height +="px"; o.cssOrig.W.width +="px";
¡¡¡¡ // o ¥ª¥Ö¥¸¥§¥¯¥È¤ò $.fn.slideToggleEx.opts ¥ª¥Ö¥¸¥§¥¯¥È¤ËÊ»¹ç¤¹¤ë¡£
22:¡¡¡¡$.extend($.fn.slideToggleEx.opts,o);
23:¡¡}
¡¡¡¡¡¡/* 24 ¡Á 36 ¹ÔËø¤Î¥Ö¥í¥Ã¥¯¤Ï¡¢slideToggleEx ¤¬¸Æ¤Ó½Ð¤µ¤ì¤ëÅÙ¤Ë
¡¡¡¡¡¡ * ºîÍѤ¹¤ë¡£27 ¹Ô¤Ç type Ãͤò¥Á¥§¥Ã¥¯¤¹¤ë¤Î¤Ï¡¢Æ±°ìÍ×ÁǤˤª¤±¤ë°Û¤Ê¤ë type ÃÍ
¡¡¡¡¡¡ * ¤Ë¤è¤ëslideToggleEx ¥á¥½¥Ã¥É¤ÎϢ³µ¯Æ°¤Î¾ì¹ç¤ËÂн褹¤ë¤¿¤á¤Ç¤¢¤ë¡£
¡¡¡¡¡¡ * slideToggleEx ¥á¥½¥Ã¥É¤ÎϢ³µ¯Æ°¤Î¾ì¹ç¤Ë¤Ï¡¢¸Æ¤Ó½Ð¤µ¤ì¤ëÅÙ¤Ë o.duration¡¢
¡¡¡¡¡¡ * o.easing¡¢o.complete ¤¬ÊѲ½¤¹¤ë²ÄǽÀ¤¬¤¢¤ë¤Î¤Ç¡¢¤³¤ì¤é¤â¸Æ¤Ó½Ð¤·Ëè¤Ë
¡¡¡¡¡¡ * ÄêµÁ¤¹¤ëɬÍפ¬¤¢¤ë¡£
¡¡¡¡¡¡ */
¡¡¡¡¡¡// window ¥µ¥¤¥º¤¬Êѹ¹¤µ¤ì¤¿»þ¤Ë¤Ï¿ÆÍ×ÁÇ¥µ¥¤¥º¤ò·×¬¤·Ä¾¤¹¡£
24:¡¡window.onresize = getParentWH;
25:¡¡o.cnt = $.fn.slideToggleEx.opts.cnt++; // ¥«¥¦¥ó¥¿¡¼Ãͤò 1 Áý¤¹¤ë¡£
26:¡¡o.odd = o.cnt % 2; // o.cnt ¤¬´ñ¿ô¤«¶ö¿ô¤«¤òȽÄꤹ¤ë
27:¡¡o.type = o.type!==type ? type : o.type;
¡¡¡¡¡¡// duration ¤Ê¤É¤Î½é´üÃÍ¤Ï $.fn.slideToggleEx.opts ¤ËÍѰդ·¤Æ¤ª¤¯¡£
28:¡¡o.duration = duration || o.duration;
29:¡¡o.easing = typeof duration !=="object" ? (easing || o.easing) : "";
30:¡¡o.complete = typeof duration !=="object" ? ($.isFunction(fn) && fn || o.complete) : "";
31:
¡¡¡¡¡¡/* ¥¢¥Ë¥áÂоݥΡ¼¥É¤Ë AdjustN¡Ê N ¤Ï type ÃÍ ¡Ë̾¤Ç
¡¡¡¡¡¡ * ´ØÏ¢¤Å¤±¤é¤ì¤¿¥ª¥Ö¥¸¥§¥¯¥È¤¬¤Ê¤±¤ì¤Ð¡¢adjustcssAnim ´Ø¿ô¤ò¸Æ¤Ó½Ð¤·¡¢
¡¡¡¡¡¡ * ¤½¤ÎÊÖÃͤò o.cssAdjust.show µÚ¤Ó .hide ¥×¥í¥Ñ¥Æ¥£¤ËÂåÆþ¤¹¤ë¡£
¡¡¡¡¡¡ * ´ØÏ¢¤Å¤±¤é¤ì¤¿¥ª¥Ö¥¸¥§¥¯¥È¤¬¤¢¤ì¤Ð¤½¤Î¤Þ¤ÞÍøÍѤ¹¤ë¡£
¡¡¡¡¡¡ * ¤³¤³¤Ë o.cssAdjust ¤Ï animate ¥á¥½¥Ã¥É¤ÇÍøÍѤ¹¤ë¥¢¥Ë¥áÍÑ CSS ¥×¥í¥Ñ¥Æ¥£¤ÎÆâ¡¢
¡¡¡¡¡¡ * µ¯½ªÅÀ°ÌÃ֤˱þ¤¸¤ÆÊѲ½¤¹¤ë top µÚ¤Ó lef ÃͤÀ¤±¤òÊÝ»ý¤¹¤ë¥ª¥Ö¥¸¥§¥¯¥È¤Ç¤¢¤ë¡£
¡¡¡¡¡¡ * show µÚ¤Ó hide ¥×¥í¥Ñ¥Æ¥£¤Ë¤Ï "+=" ¤Ê¤É¤Î relative ¥¢¥Ë¥á¡¼¥·¥ç¥óÃͤ¬ÀßÄꤵ¤ì¤ë¡£
¡¡¡¡¡¡ */
32:¡¡o.cssAdjust = $.data(o.el,"Adjust"+o.type) ||
33:¡¡¡¡$.data(o.el,"Adjust" + o.type, {show:adjustcssAnim(true), hide:adjustcssAnim(false)});
¡¡¡¡¡¡/* ¥¢¥Ë¥áÂоݥΡ¼¥É¤Ë AnimN¡Ê N ¤Ï type ÃÍ ¡Ë̾¤Ç´ØÏ¢¤Å¤±¤é¤ì¤¿
¡¡¡¡¡¡ * ¥ª¥Ö¥¸¥§¥¯¥È¤¬¤Ê¤±¤ì¤Ð¡¢setAnimCSS ´Ø¿ô¤ò¸Æ¤Ó½Ð¤·¤Æ¤½¤ÎÊÖÃͤò o.cssAnim
¡¡¡¡¡¡ * ¥ª¥Ö¥¸¥§¥¯¥È¤ËÂåÆþ¤¹¤ë¡£´ØÏ¢¤Å¤±¤é¤ì¤¿¥ª¥Ö¥¸¥§¥¯¥È¤¬¤¢¤ì¤Ð¤½¤Î¤Þ¤ÞÍøÍѤ¹¤ë¡£
¡¡¡¡¡¡ * ¤³¤³¤Ë cssAnim ¤Ï animate ¥á¥½¥Ã¥É¤ÇÍøÍѤ¹¤ë¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤ÎÁ´¤Æ¤ò
¡¡¡¡¡¡ * ÊÝ»ý¤¹¤ë¥ª¥Ö¥¸¥§¥¯¥È¤Ç¤¢¤ê¡¢29 ¹Ô¤Ç¼èÆÀ¤·¤¿ topÃÍ¤È leftÃͤâÊ»¹ç¤¹¤ë¡£
¡¡¡¡¡¡ */
34:¡¡o.cssAnim = $.data(o.el,"Anim" + o.type) || $.data(o.el,"Anim" + o.type, setcssAnim());
¡¡¡¡¡¡/* ¥¢¥Ë¥áÂоݥΡ¼¥É¤Ë BeforeN¡Ê N ¤Ï type ÃÍ ¡Ë̾¤Ç´ØÏ¢¤Å¤±¤é¤ì¤¿
¡¡¡¡¡¡ * ¥ª¥Ö¥¸¥§¥¯¥È¤¬¤Ê¤±¤ì¤Ð¡¢makecssBefore ´Ø¿ô¤ò¸Æ¤Ó½Ð¤·¤Æ¤½¤ÎÊÖÃͤò o.cssBefore
¡¡¡¡¡¡ * ¥ª¥Ö¥¸¥§¥¯¥È¤ËÂåÆþ¤¹¤ë¡£´ØÏ¢¤Å¤±¤é¤ì¤¿¥ª¥Ö¥¸¥§¥¯¥È¤¬¤¢¤ì¤Ð¤½¤Î¤Þ¤ÞÍøÍѤ¹¤ë¡£
¡¡¡¡¡¡ * ¤³¤³¤Ë cssBefore ¤Ï animate ¥á¥½¥Ã¥Éµ¯Æ°Ä¾Á°¤Î¥¢¥Ë¥áÂоÝÍ×ÁǤΥ¹¥¿¥¤¥ë°ÀÃͤò
¡¡¡¡¡¡ * ¼èÆÀ¤·¡¢¤¢¤ë¤¤¤ÏÀßÄꤹ¤ë¤¿¤á¤Î¥ª¥Ö¥¸¥§¥¯¥È¤Ç¤¢¤ë¡£
¡¡¡¡¡¡ */
35:¡¡o.cssBefore = $.data(o.el,"Before" + o.type) || $.data(o.el,"Before" + o.type, makecssBefore());
¡¡¡¡¡¡// Åö³º¤Î¥¢¥Ë¥áÂоÝÍ×ÁǤ˽é¤á¤Æ¡¢¤¢¤ë¤¤¤ÏÊ̤Υ¢¥Ë¥áÂоÝÁàºî¸å¤ËºÆ¤Ó
¡¡¡¡¡¡// slideToggleEx ¥á¥½¥Ã¥É¤òŬÍѤ·¤¿»þ¤Ë¡¢ºÇ½é¤Ëµ¯Æ°¤µ¤ì¤¿¾ì¹ç¤Ë¤Î¤ßŬÍѤ¹¤ë¥³¡¼¥É¡£
¡¡¡¡¡¡// ÂоÝÍ×ÁǤÎɽ¼¨¾õÂ֤˱þ¤¸¤Æ¡¢animate ¥á¥½¥Ã¥ÉŬÍÑÁ°¤Î CSS ÃͤòÀßÄꤹ¤ë¡£
36:¡¡if (o.cnt==1) $target.css( o.initstate ? o.cssBefore.show : o.cssBefore.hide );
37:
¡¡¡¡¡¡/* ¥¢¥Ë¥á¡¼¥·¥ç¥óµ¯Æ°
¡¡¡¡¡¡ * Âè 2 °ú¿ô¤¬¥ª¥Ö¥¸¥§¥¯¥È¤Ç¤Ï¤Ê¤¤»þ
¡¡¡¡¡¡ * Í×ÁǤΠanimate ¥á¥½¥Ã¥ÉŬÍÑÁ°¤Îɽ¼¨¾õÂÖ¤È slideToggleEx ¥á¥½¥Ã¥É¤Îµ¯Æ°
¡¡¡¡¡¡ * ²ó¿ô¤Ë±þ¤¸¤Æ¡¢Åö³º¥á¥½¥Ã¥ÉÂè°ì°ú¿ô¤Ç¤¢¤ë CSS ¥ª¥Ö¥¸¥§¥¯¥È¤òÁªÂòŪ¤ËŬÍѤ¹¤ë¡£
¡¡¡¡¡¡ */
38:¡¡if (typeof o.duration !=="object")
39:¡¡¡¡return this.animate( (o.initstate && !o.odd || !o.initstate && o.odd)
40:¡¡¡¡¡¡? o.cssAnim.show : o.cssAnim.hide, o.duration, o.easing, o.complete );
¡¡¡¡¡¡// Âè 2 °ú¿ô¤¬¥ª¥Ö¥¸¥§¥¯¥È¤Î»þ
¡¡¡¡¡¡// Í×ÁǤΠanimate ¥á¥½¥Ã¥ÉŬÍÑÁ°¤Îɽ¼¨¾õÂÖ¤È slideToggleEx ¥á¥½¥Ã¥É¤Îµ¯Æ°
¡¡¡¡¡¡// ²ó¿ô¤Ë±þ¤¸¤Æ¡¢Åö³º¥á¥½¥Ã¥ÉÂè°ì°ú¿ô¤Ç¤¢¤ë CSS ¥ª¥Ö¥¸¥§¥¯¥È¤òÁªÂòŪ¤ËŬÍѤ¹¤ë¡£
41:¡¡else
42:¡¡¡¡return this.animate( (o.initstate && !o.odd || !o.initstate && o.odd)
43:¡¡¡¡¡¡? o.cssAnim.show : o.cssAnim.hide, o.duration ); // ¥¢¥Ë¥áµ¯Æ°
44:// °Ê²¼¤Ï°Ê¾åËø¤Î¥³¡¼¥É¤«¤é¸Æ¤Ó½Ð¤µ¤ì¤ë´Ø¿ô·²¤Ç¤¢¤ë¡£
¡¡¡¡¡¡/* getSize ¤Ï¥¢¥Ë¥áÂоݥΡ¼¥É¤Î position »ØÄê¤ò¹Ô¤¤¡¢¥µ¥¤¥º¤ò¬¤ë´Ø¿ô¡£
¡¡¡¡¡¡ * ¤³¤Î´Ø¿ô¤Ï°¿¤ëÍ×ÁǤËÂФ·¤Æ slideToggleEx ¥á¥½¥Ã¥É¤òŬÍѤ·¤¿½é²ó¤À¤±¤Ë¤¿¤Ã¤¿1 ²ó
¡¡¡¡¡¡ * ¤À¤±µ¯Æ°¤µ¤ì¤ë¡£ 54 ¹Ô¤È 35 ¹Ô¤Î data ¥á¥½¥Ã¥É¤Ë¤è¤Ã¤Æ data ´ØÏ¢¤Å¤±¤ò¹Ô¤ï¤Ã¤Æ¤¤¤ë
¡¡¡¡¡¡ * ¤Î¤Ç¡¢Æ±¤¸Í×ÁǤËÂФ¹¤ë 2 ÅÙÌܰʹߤθƤӽФ·»þ¤Ë¤Ï¡¢¤¿¤È¤¨ÈóϢ³Ū¤Ë¸Æ¤Ó½Ð¤µ¤ì¤¿
¡¡¡¡¡¡ * ¤È¤·¤Æ¤â¡¢¤³¤Î´Ø¿ô¤Ï¸Æ¤Ó½Ð¤µ¤ì¤Ê¤¤¡£
¡¡¡¡¡¡ */
45:¡¡function getSize(){
¡¡¡¡¡¡¡¡// position »ØÄê¤ò relative ¤Ë
46:¡¡¡¡if ($target.css("position") ==="static") $target.css({position:"relative"});
47:¡¡¡¡var obj={}, parent={};
48:¡¡¡¡return obj= {
¡¡ ¡¡¡¡ // ¿ÆÍ×ÁǤÎÉý¤È¹â¤µ¤ò¼èÆÀ
49:¡¡¡¡¡¡parent : {W:getParentWH().W, H:getParentWH().H},
¡¡ ¡¡¡¡ // ¥¢¥Ë¥áÂоÝÍ×ÁǤΥޡ¼¥¸¥óÊդޤǤι⤵¡Ê»»½Ð¥¹¥¿¥¤¥ëÃ͡˼èÆÀ
50:¡¡¡¡¡¡oH : parseInt($.css(o.el,"height",true,"margin")),
¡¡ ¡¡¡¡ // ¥¢¥Ë¥áÂоÝÍ×ÁǤΥޡ¼¥¸¥óÊդޤǤÎÉý¡Ê»»½Ð¥¹¥¿¥¤¥ëÃ͡˼èÆÀ
51:¡¡¡¡¡¡oW : parseInt($.css(o.el,"width",true,"margin")),
¡¡ ¡¡¡¡ // ¥¢¥Ë¥áÂоÝÍ×ÁǤΥܡ¼¥À¡¼ÊդޤǤι⤵¡Ê»»½Ð¥¹¥¿¥¤¥ëÃ͡˼èÆÀ
52:¡¡¡¡¡¡oHb : parseInt($.css(o.el,"height",true,"border")),
¡¡ ¡¡¡¡ // ¥¢¥Ë¥áÂоÝÍ×ÁǤΥܡ¼¥À¡¼ÊդޤǤÎÉý¡Ê»»½Ð¥¹¥¿¥¤¥ëÃ͡˼èÆÀ
53:¡¡¡¡¡¡oWb : parseInt($.css(o.el,"width",true,"border"))
54:¡¡¡¡};
55:¡¡}
56:¡¡function getParentWH(){ // ¥¢¥Ë¥áÂоݤοÆÍ×ÁǤΥµ¥¤¥º¤ò·×¬¼èÆÀ¤¹¤ë´Ø¿ô
57:¡¡¡¡var parent = $target.parent();
58:¡¡¡¡return o.parent={W:parent().width(),H:parent().height()};
59:¡¡}
¡¡¡¡¡¡// ¥¢¥Ë¥á¡¼¥·¥ç¥óµ¯½ªÅÀ¤Ë±þ¤¸¤¿¥¢¥Ë¥áÍÑ top/left ÃÍÀßÄê´Ø¿ô
60:¡¡function adjustcssAnim(showhide){
61:¡¡¡¡var plmn = showhide ? "-=" : "+=";
62:¡¡¡¡return o.type==0 ? {top:plmn + o.oH/2 +"px", left:plmn + o.oW/2 +"px"} : // center
63:¡¡¡¡¡¡o.type==1 ? {} : // º¸¾åü¡£top ¤â left ¤â¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤È¤·¤Ê¤¤¡£
64:¡¡¡¡¡¡o.type==2 ? {left:plmn + o.oW +"px"} : // ±¦¾åü
65:¡¡¡¡¡¡o.type==3 ? {top:plmn + o.oH +"px", left:plmn + o.oW +"px"} : // ±¦²¼Ã¼
66:¡¡¡¡¡¡o.type==4 ? {top:plmn + o.oH +"px"} : 3aspan class="aquamarine"
67:¡¡¡¡¡¡o.type==5 ? {} : // ¾åÊÕ¡£top ¤â left ¤â¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤È¤·¤Ê¤¤¡£
68:¡¡¡¡¡¡o.type==6 ? {left:plmn + o.oW +"px"} : // ±¦ÊÕ
69:¡¡¡¡¡¡o.type==7 ? {top:plmn + o.oH +"px"} : // ²¼ÊÕ
70:¡¡¡¡¡¡{} ; // º¸ÊÕ¡£top ¤â left ¤â¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤È¤·¤Ê¤¤¡£
71:¡¡}
¡¡¡¡¡¡/* ¥¢¥Ë¥áÍÑ¥×¥í¥Ñ¥Æ¥£¤òºîÀ®¤¹¤ë´Ø¿ô
¡¡¡¡¡¡ * o.cssdefault ¤ò´ð¤Ë¤·¤Æ²£Êý¸þ/½ÄÊý¸þ¤Î¥×¥í¥Ñ¥Æ¥£¤òºîÀ®¤·¡¢¤Þ¤¿¤½¤ÎÍ̵¤ò
¡¡¡¡¡¡ * type ÃÍËè¤ËÊѲ½¤µ¤»¤ë¡£
¡¡¡¡¡¡ * Î㤨¤Ð¡¢type Ãͤ¬ 5 ¤Î¾ì¹ç¡¢²£Êý¸þ¤Î¥×¥í¥Ñ¥Æ¥£¤Ï¥¢¥Ë¥áÂоݤȤϤ·¤Ê¤¤¡£
¡¡¡¡¡¡ * ¤Þ¤¿¡¢margin ¤Ï auto ¤¬»ØÄꤵ¤ì¤Æ¤¤¤ë¾ì¹ç¤Ë¤Ï¥¢¥Ë¥áÍÑ¥×¥í¥Ñ¥Æ¥£¤È¤»¤º¡¢
¡¡¡¡¡¡ * ¤½¤Î¾¤Î¾ì¹ç¤Ë¤Ï¾¤Î¥×¥í¥Ñ¥Æ¥£¤ÈƱÍͤË"toggle"¤È¤¹¤ë¡£
¡¡¡¡¡¡ * 79 ¹Ô¤Ç²£/½ÄÊý¸þ¤Î¥×¥í¥Ñ¥Æ¥£¤ò¹çÂΤµ¤»¡¢ÉÔÆ©ÌÀÅ٤⥢¥Ë¥áÍÑ¥×¥í¥Ñ¥Æ¥£¤È
¡¡¡¡¡¡ * ¤·¤ÆÄɲ乤롣
¡¡¡¡¡¡ * ºÇ¸å¤Ë 80¡Á82 ¹Ô¤Ë¤ª¤¤¤Æ¡¢¤½¤ì¤Þ¤Ç¤Ëºî¤Ã¤¿¥¢¥Ë¥áÍÑ CSS ¥ª¥Ö¥¸¥§¥¯¥È¤Ë
¡¡¡¡¡¡ * ¥¢¥Ë¥á¡¼¥·¥ç¥óµ¯½ªÅÀ¤Ë±þ¤¸¤ÆÊѲ½¤¹¤ë top ¤È left ¥×¥í¥Ñ¥Æ¥£¤òÄɲ乤롣
¡¡¡¡¡¡ */
72:¡¡function setcssAnim(){
73:¡¡¡¡var obj = {};
74:¡¡¡¡obj.W = (o.type!=5 && o.type!=7) ? $.extend({}, o.cssdefault.W,
75:¡¡¡¡¡¡¡¡(o.oW!==o.oWb) ? {marginLeft:"toggle",marginRight:"toggle"} : {}) : {};
76:¡¡¡¡obj.H = (o.type!=6 && o.type!=8) ? $.extend({}, o.cssdefault.H,
77:¡¡¡¡¡¡¡¡(o.oH!==o.oHb) ? {marginTop:"toggle",marginBottom:"toggle"} : {}) : {};
78:¡¡¡¡obj = $.extend({}, obj.W, obj.H, {opacity :"toggle"});
79:¡¡¡¡return o.cssAnim = {
80:¡¡¡¡¡¡show:$.extend({},obj,o.cssAdjust.show),hide:$.extend({},obj,o.cssAdjust.hide)
81:¡¡¡¡};
82:¡¡}
¡¡¡¡¡¡// animate ¥á¥½¥Ã¥ÉŬÍÑÁ°¤ÎŬÍÑÂоÝÍ×ÁǤΠCSS ÃͤòºîÀ®¤¹¤ë´Ø¿ô
83:¡¡function makecssBefore(){
84:¡¡¡¡var obj = {}, ret = {};
¡¡¡¡¡¡¡¡/* margin ¤ò¥¢¥Ë¥áÂоݤˤ·¤¿¾ì¹ç¤Ë¤ª¤¤¤Æ¡¢margin Ãͤ¬ "auto" ¤Î»þ¤Ë¤Ï¡¢
¡¡¡¡¡¡¡¡ * jquery.js ¤Î³Æ¼ï¥á¥½¥Ã¥É¤Ç¥µ¥¤¥º¤ò¬Äꤷ¤Æ¤â margin Ãͤ¬Ê᪤Ǥ¤Ê¤¤¡£
¡¡¡¡¡¡¡¡ * ¤½¤Î·ë²Ì¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ïͽ´ü¤»¤Ìư¤¤ò¤·¤Æ¤·¤Þ¤¦¤¿¤á¡¢¤Þ¤º¡¢margin Ãͤò
¡¡¡¡¡¡¡¡ * ¶¯À©Åª¤Ë¥¼¥í¤Ë¤·¡¢Âؤï¤ê¤Ë auto »ØÄê¤Ë¤è¤Ã¤Æ³ÎÊݤµ¤ì¤¿ margin ÃͤËÁêÅö¤¹¤ë
¡¡¡¡¡¡¡¡ * left ÃÍ¤È top ÃͤËÃÖ¤´¹¤¨¤ë¡£¤³¤ì¤Ë¤è¤êͽ´ü¤·¤¿¤È¤ª¤ê¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò
¡¡¡¡¡¡¡¡ * °ú¤µ¯¤³¤µ¤»¤ë¡£
¡¡¡¡¡¡¡¡ */
85:¡¡¡¡// if marginLeft/Top == "auto", fix marginLeft/Top.
86:¡¡¡¡obj.W = (o.el.style && $.attr(o.el.style,"margin-left")==="auto") ?
87:¡¡¡¡¡¡{left : (o.parent.W - o.oWb)/2 +"px", marginLeft : "0px", marginRight : "0px"} :
¡¡¡¡¡¡¡¡¡¡/* ¤³¤Î¾ì¹ç¤â¡¢margin ÃÍ¤Ï $.css ¥á¥½¥Ã¥É¤ò»È¤Ã¤Æ¼èÆÀ¤·¤Ê¤¤¤ÈÂÌÌÜ¡£
¡¡¡¡¡¡¡¡¡¡ * Î㤨¤Ð margin »ØÄ꤬´ÊάŪ¤Ë margin: 10px ¤Î¤è¤¦¤Ë¹Ô¤ï¤ì¤Æ¤¤¤ë¾ì¹ç¤Ë¤Ï¡¢
¡¡¡¡¡¡¡¡¡¡ * jquery.js ¤Ï margin-left¡¢margin-right ¤Ê¤É¤Î¸Ä¡¹¤Î margin Ãͤò¼èÆÀ¤·¤Ê¤¤¡£
¡¡¡¡¡¡¡¡¡¡ */
88:¡¡¡¡¡¡{left :"0px",
89:¡¡¡¡¡¡¡¡marginLeft:$.css(o.el,"margin-left",true), marginRight:$.css(o.el,"margin-right",true)};
90:¡¡¡¡obj.H = (o.el.style && $.attr(o.el.style,"margin-top")==="auto") ?
91:¡¡¡¡¡¡{top : (o.parent.H - o.oHb)/2 +"px",marginTop : "0px", marginBottom : "0px"}:
92:¡¡¡¡¡¡{top : "0px",
93:¡¡¡¡¡¡¡¡marginTop:$.css(o.el,"margin-top",true), marginBottom:$.css(o.el,"margin-bottom",true)};
¡¡¡¡¡¡¡¡// ¤³¤³Ëø¤Î½èÍý·ë²Ì¤ò show ¥×¥í¥Ñ¥Æ¥£¤Ë³ÊǼ¤¹¤ë¡£
¡¡¡¡¡¡¡¡// ¤³¤Î¥×¥í¥Ñ¥Æ¥£¤¬¥¢¥Ë¥áÂоݤ¬É½¼¨¤µ¤ì¤Æ¤¤¤ë»þ¤Î¥¢¥Ë¥áÁ° CSS ÃͤȤʤ롣
94:¡¡¡¡ret.show = $.extend({}, o.cssOrig.H, o.cssOrig.W, obj.W, obj.H);
¡¡¡¡¡¡¡¡/* °Ê²¼¤Ï¥¢¥Ë¥áÂоݤ¬±£Êäµ¤ì¤Æ¤¤¤ë¾ì¹ç¤Î½èÍý
¡¡¡¡¡¡¡¡ * ¥¢¥Ë¥áÍÑCSS¥ª¥Ö¥¸¥§¥¯¥È¤Î hide ¥ª¥Ö¥¸¥§¥¯¥È¤Ë top ¥×¥í¥Ñ¥Æ¥£¤¬Â¸ºß¤·¤Æ¤¤¤ë
¡¡¡¡¡¡¡¡ * ¾ì¹ç¤Ë¤Î¤ßŬÍѤ¹¤ë¡£
¡¡¡¡¡¡¡¡ * top ¥×¥í¥Ñ¥Æ¥£¤¬Â¸ºß¤·¤Æ¤¤¤Ê¤¤¾ì¹ç¤Ë¤Ï¡¢top ¥×¥í¥Ñ¥Æ¥£¤Ï¥¢¥Ë¥áÂоݤȤ·¤Ê¤¤¡£
¡¡¡¡¡¡¡¡ */
95:¡¡¡¡if (o.cssAdjust.hide.top) // ¥¢¥Ë¥áÍÑ CSS ¥ª¥Ö¥¸¥§¥¯¥ÈºîÀ®´Ø¿ô¤òÍøÍѤ·¤Æ
¡¡¡¡¡¡¡¡¡¡// ¥¢¥Ë¥áÁ° CSS ¥ª¥Ö¥¸¥§¥¯¥È¤òºîÀ®¤¹¤ë¡£
96:¡¡¡¡¡¡obj.top = new Number(parseInt(obj.H.top))
97:¡¡¡¡¡¡¡¡+ new Number(parseInt(o.cssAdjust.hide.top.slice(2)))+"px";
¡¡¡¡¡¡¡¡// ¥¢¥Ë¥áÍÑCSS¥ª¥Ö¥¸¥§¥¯¥È¤Î hide ¥ª¥Ö¥¸¥§¥¯¥È¤Ë left ¥×¥í¥Ñ¥Æ¥£
¡¡¡¡¡¡¡¡// ¤¬Â¸ºß¤·¤Æ¤¤¤ë¾ì¹ç¤Ë¤Î¤ßŬÍѤ¹¤ë¡£
¡¡¡¡¡¡¡¡// left ¥×¥í¥Ñ¥Æ¥£¤¬Â¸ºß¤·¤Æ¤¤¤Ê¤¤¾ì¹ç¤Ë¤Ï¡¢left ¥×¥í¥Ñ¥Æ¥£¤Ï¥¢¥Ë¥áÂоݤȤ·¤Ê¤¤¡£
98:¡¡¡¡if (o.cssAdjust.hide.left) // ¥¢¥Ë¥áÍÑ CSS ¥ª¥Ö¥¸¥§¥¯¥ÈºîÀ®´Ø¿ô¤òÍøÍÑ
¡¡¡¡¡¡¡¡¡¡// ¤·¤Æ¥¢¥Ë¥áÁ° CSS ¥ª¥Ö¥¸¥§¥¯¥È¤òºîÀ®¤¹¤ë¡£
99:¡¡¡¡¡¡obj.left = new Number(parseInt(obj.W.left))
100:¡¡¡¡¡¡¡¡+ new Number(parseInt(o.cssAdjust.hide.left.slice(2)))+"px";
¡¡¡¡¡¡¡¡// ¤³¤³Ëø¤Î½èÍý·ë²Ì¤ò hide ¥×¥í¥Ñ¥Æ¥£¤Ë³ÊǼ¤¹¤ë¡£
¡¡¡¡¡¡¡¡// ¤³¤Î¥×¥í¥Ñ¥Æ¥£¤¬¥¢¥Ë¥áÂоݤ¬±£Êäµ¤ì¤Æ¤¤¤ë»þ¤Î¥¢¥Ë¥áÁ° CSS ¥ª¥Ö¥¸¥§¥¯¥È¤È¤Ê¤ë¡£
101:¡¡¡¡ret.hide = $.extend({}, ret.show, obj);
¡¡¡¡¡¡¡¡// data ¥á¥½¥Ã¥É¤Ë¤è¤ë´ØÏ¢¤Å¤±¤ò¹Ô¤Ã¤Æ¤«¤é ret ¥ª¥Ö¥¸¥§¥¯¥È¤òÊÖ¤¹¡£
102:¡¡¡¡return ret;
103:¡¡}
104:} // End of $.fn.slideToggleEx
105:
106:// default ÃÍÀßÄê¤Èµ²±ÍÑ¥×¥í¥Ñ¥Æ¥£¤È¤·¤Æ¤Îµ¡Ç½¤Î¤¿¤á¤Ë
107:$.fn.slideToggleEx.opts = {
¡¡¡¡¡¡// ´ûÄêÃͤȤ·¤Æ¤Î°ú¿ôÀßÄê
108:¡¡duration : 1000, easing : null, complete : function(){},
¡¡¡¡¡¡/* auto »ØÄê¤Ø¤ÎÂбþ¤¬É¬Í×¤Ê margin¡¢µÚ¤Ó type Ãͤ˱þ¤¸¤ÆÊѲ½¤µ¤»¤ë
¡¡¡¡¡¡ * ɬÍפΤ¢¤ë top ¤È left ¨¡¨¡¨¡¤³¤ì¤é¤ò½ü¤¯¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¥ê¥¹¥È¡£
¡¡¡¡¡¡ * ÍåÎó¤µ¤ì¤Æ¤¤¤ë¥×¥í¥Ñ¥Æ¥£¤Ï¡¢ºÇ¾®ÃͤΠ0 Ëô¤Ï 1 (width ¤È height ¤Î¤ß)¤È
¡¡¡¡¡¡ * Í×ÁǸÇͤΥץí¥Ñ¥Æ¥£ÃͤȤδ֤ǥ¢¥Ë¥á¡¼¥·¥ç¥ó¤µ¤»¤ë¤³¤È¤Ë¤Ê¤ë¡£
¡¡¡¡¡¡ * ¹â¤µÊý¸þ¤È²£Êý¸þ¤È¤ò¶èÊ̤¹¤ë¤Î¤Ï¡¢type Ãͤ˱þ¤¸¤Æ¥¢¥Ë¥áÂоݥץí
¡¡¡¡¡¡ * ¥Ñ¥Æ¥£¤ÎÍ×/ÉÔÍפ¬ÊѲ½¤¹¤ë¤¿¤á¤Ç¤¢¤ë¡£
¡¡¡¡¡¡ */
109:¡¡cssdefault : {
110:¡¡¡¡H : {
111:¡¡¡¡¡¡height:"toggle",paddingTop:"toggle",paddingBottom:"toggle",
112:¡¡¡¡¡¡borderTopWidth:"toggle",borderBottomWidth:"toggle"
113:¡¡¡¡},
114:¡¡¡¡W : {
115:¡¡¡¡¡¡width:"toggle",¡¡paddingLeft:"toggle",paddingRight:"toggle",
116:¡¡¡¡¡¡borderLeftWidth:"toggle",borderRightWidth:"toggle"
117:¡¡¡¡}
118:¡¡},
119:¡¡cssAdjust : {},
120:¡¡cssOrig : {H:{},W:{}},
121:¡¡cssBefore : {}
122:};
123:})(jQuery);
ľ¾å¤Ë·ÇºÜ¤·¤¿¥³¡¼¥É¤Ë»ê¤ë¤Þ¤Ç¡¢¼Â¤Ï¿¤¯¤Î¥Ð¡¼¥¸¥ç¥ó¤òºîÀ®¤·¡¢¼ºÇÔ¤·¤Æ¤Ïºî¤êľ¤¹¡Ö¤é¤»¤óۡײáÄø¤ò²¿Å٤ⷫ¤êÊÖ¤·¤Þ¤·¤¿¡£¤·¤«¤·¡¢¤½¤Î¶ìÏ«ÏäÎÁ°¤Ë¡¢¤Þ¤º¥³¡¼¥ÉºîÀ®¤Î´ðËÜŪÊý¿Ë¤ò½Ò¤Ù¤Æ¤ª¤¯¤Ù¤¤Ç¤·¤ç¤¦¡£
¤Þ¤º¶ìÏ«¤·¤¿¤Î¤Ï¡¢slideToggleEx ¥×¥é¥°¥¤¥ó¤ÎºÆµ¯Æ°¤ÎºÝ¤Ë¡¢½¾Á°ÃͤòÊÝ»ý¤µ¤»¤ëÁ¼Ã֤Ǥ·¤¿¡£
̵̾´Ø¿ô¤Î¥È¥Ã¥×¥ì¥Ù¥ë¤Ç¡¢slideToggleEx ¥á¥½¥Ã¥É³°¤ËÊÑ¿ô¤òÍѰդ¹¤ì¤Ð²ò·è¤¹¤ë¤³¤È¤Ê¤Î¤Ç¤¹¤¬¡¢À§¤¬Èó¤Ç¤â¥×¥é¥°¥¤¥ó¤Î¥á¥½¥Ã¥É³°¤ËÊÑ¿ô¤òÃÖ¤«¤Ê¤¤¤Ç¤Þ¤È¤á¤¿¤«¤Ã¤¿¤Î¤Ç¡¢¹´¤Ã¤Æ¥³¡¼¥É¤òºî¤ê¤Þ¤·¤¿¡£¤½¤Î·ë²Ì¡¢¥á¥½¥Ã¥É³°¤È¤Ê¤ëÅÀ¤Ç¤ÏÊѤï¤é¤Ê¤¤¤Î¤Ç¤¹¤¬¡¢¡ØJavascript Âè 5 ÈÇ¡Ùp.144 ¤ä cycle ¥×¥é¥°¥¤¥ó¤ò»²¹Í¤Ë¤·¤Æ slideToggleEx ¥á¥½¥Ã¥É¤Î¥×¥í¥Ñ¥Æ¥£¤ËÃͤòÊÝ»ý¤µ¤»¤ë¤³¤È¤Ë¤·¤Þ¤·¤¿¡£
¥á¥½¥Ã¥É¼Â¹Ô¤¬½ª¤ï¤ë¤È¤½¤ÎÃæ¤ÇÄêµÁ¤µ¤ì¤¿ÊÑ¿ô¤Ï¾Ã¼º¤·¤Æ¤·¤Þ¤¦¤Î¤Ç¡¢Åö³º¥á¥½¥Ã¥É¤Îµ¯Æ°²ó¿ô¤òµ²±¤µ¤»¤ëÊÑ¿ô¤ÏÅö³º¥á¥½¥Ã¥É³°¤Ë¤Ê¤±¤ì¤Ð¤Ê¤ê¤Þ¤»¤ó¡£¤·¤«¤·³°¤ËÊÑ¿ô¤òÃÖ¤¯¤Î¤ÏÈþ¤·¤¯¤¢¤ê¤Þ¤»¤ó¡£
¤½¤³¤Ç¥á¥½¥Ã¥É¤Î¥×¥í¥Ñ¥Æ¥£¤òµ²±ÁõÃ֤ˤ¹¤ë¤³¤È¤Ë¤·¤Þ¤·¤¿¡£¥³¡¼¥É¤Î 107 ¹Ô¤«¤é 122 ¹Ô¤¬¤½¤Îµ²±ÁõÃ֤Ǥ¹¡£
Í×ÁǤ¬±£Êäµ¤ì¤Æ¤¤¤Æ¤âɽ¼¨¤µ¤ì¤Æ¤¤¤Æ¤â¡¢Í×ÁǸÇͤΠmargin¡¢border¡¢padding¡¢width¡¢height ÃͤʤɤÏÊÝ»ý¤µ¤ì¤Æ¤¤¤Þ¤¹¡£±£Êäµ¤ì¤Æ¤¤¤Æ¤â¤½¤Î¥¹¥¿¥¤¥ë½ôÃͤ¬¥¼¥í¤Ë¤Ê¤ë¤ï¤±¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¡£¤½¤Î¤³¤È¤ò¤Þ¤ºÇİ®¤·Íý²ò¤¹¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£¡Ê ¼Â¤Ï»ä¤Ï¤³¤Î¤³¤È¤Ø¤ÎÍý²ò¤¬ÉÔ½½Ê¬¤Ç¤·¤¿¡£ ¡Ë
¼¡¤Ë¡¢slideToggleEx ¥á¥½¥Ã¥É¤ÎŬÍÑÂоݤ¬Ê£¿ô¸ºß¤·¤Æ¤¤¤ë¥¨¥ó¥È¥ê¥¤¤Ë¤ª¤¤¤Æ¡¢¥¢¥Ë¥áµ¯Æ°¤¬°Û¤Ê¤ëÍ×ÁǤËÂФ·¤Æ¥¢¥È¡¦¥é¥ó¥À¥à¤Ë¹Ô¤ï¤ì¤ë¾ì¹ç¡¢¤½¤ì¤¾¤ì¤ÎÍ×ÁǤËÂФ·¤ÆÅ¬Àڤʥ¢¥Ë¥á¤òµ¯¤³¤µ¤»¤ë¤³¤È¤¬¤«¤Ê¤êÆñ¤·¤¤¤³¤È¤Ç¤·¤¿¡£
°ÊÁ°¡¢slideToggleEx ¥á¥½¥Ã¥ÉÂоݤȤʤä¿Í×ÁǤ϶ö¡¹±£Êäµ¤ì¤Æ¤¤¤ë¤«¤â¤·¤ì¤Ê¤¤¤·¡¢É½¼¨¤µ¤ì¤Æ¤¤¤ë¤«¤â¤·¤ì¤Þ¤»¤ó¡£º£ slideToggleEx ¥¢¥Ë¥á¤ò°ú¤µ¯¤³¤·¤¿Í×ÁǤâɽ¼¨¤µ¤ì¤Æ¤¤¤ë¤«¤â¤·¤ì¤Ê¤¤¤·¡¢±£¤ì¤Æ¤¤¤ë¤«¤â¤·¤ì¤Þ¤»¤ó¡£¤³¤Î¤è¤¦¤Ê¥¢¥È¡¦¥é¥ó¥À¥à¤Ê¾õÂ֤ˤª¤¤¤Æ¤â¡¢¤½¤ì¤¾¤ì¤ÎÍ×ÁÇËè¤ËŬÀÚ¤Ê slideToggleEx ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬°ú¤µ¯¤³¤µ¤ì¤ë¤è¤¦¤Ë¤·¤Ê¤±¤ì¤Ð¤Ê¤ê¤Þ¤»¤ó¡£
°Ê¾å¤òƧ¤Þ¤¨¤¿½èÍý¤È¤·¤Æ cssBefore ¥ª¥Ö¥¸¥§¥¯¥È¤òÍѰդ·¤Þ¤·¤¿¡Ê32 ¡Á 33 ¹Ô¡Ë¡£¤³¤Î¥ª¥Ö¥¸¥§¥¯¥È¤Ë¤è¤ê¥¢¥Ë¥á¡¼¥·¥ç¥óµ¯Æ°Á°¤ÎÍ×ÁǤΥץí¥Ñ¥Æ¥£¤ò»öÁ°¤ËÀßÄꤹ¤ë¤ï¤±¤Ç¤¹¡£¤³¤ì¤Ë¤è¤ê±£ÊþõÂÖ¤«¤éɽ¼¨¤Ø¤È¥¢¥Ë¥á¡¼¥È¤¹¤ëÍ×ÁǤ¬¡¢Å¬ÀڤʰÌÃÖ¤Çɽ¼¨¤µ¤ì¤ë¤è¤¦¤Ë¤Ê¤ê¤Þ¤·¤¿¡£
margin ÃͤϰìÈÌ¤Ë ¡Ö margin:1em auto ¡× ¤Ê¤É¤Î¤è¤¦¤Ë´ÊάŪ¤Ë»ØÄꤵ¤ì¤Æ¤¤¤ë¾ì¹ç¤¬Â¿¤¤¤Ç¤·¤ç¤¦¡£
¤È¤³¤í¤¬¤³¤Î¤è¤¦¤Ê»ØÄê¤Î¾ì¹ç¤Ë¤Ï¡¢jquery.js ¤Î css ¥á¥½¥Ã¥ÉÅù¤ò³èÍѤ·¤Æ¤â margin-left Åù¤Î¸Ä¡¹¤Î margin Ãͤò¼èÆÀ¤¹¤ë¤³¤È¤¬½ÐÍè¤Þ¤»¤ó¡£ÆÃ¤Ë auto »ØÄ꤬¤µ¤ì¤Æ¤¤¤ë¾ì¹ç¡¢margin ¤ò¥¢¥Ë¥á¥×¥í¥Ñ¥Æ¥£¤Ë»ØÄꤹ¤ë¤ÈÁ´¤¯Í½ÁÛ³°¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬°ú¤µ¯¤³¤µ¤ì¤Æ¤·¤Þ¤¤¤Þ¤¹¡£jquery.js ¤Ï auto »ØÄꤵ¤ì¤¿ margin Ãͤò¿ôÃÍŪ¤Ëª¤¨¤ë¤³¤È¤¬½ÐÍè¤Ê¤¤¤Î¤Ç¡¢margin-left¡¢margin-right Åù¤Î¥×¥í¥Ñ¥Æ¥£¤ò¥¼¥í¤ÈȽÆÉ¤·¤Æ¤·¤Þ¤¦¤¿¤á¤Ç¤¹¡£
¤³¤¦¤·¤Æ¡¢margin Ãͤ¬ÍÍ¡¹¤ÊÍͼ°¤Ç»ØÄꤵ¤ì¤Æ¤¤¤ë¾ì¹ç¤Ç¤â¡¢¤½¤ì¤òŬÀڤʿôÃͤȤ·¤ÆÇİ®¤¹¤ëɬÍפ¬À¸¤¸¤Þ¤¹¡£
¤½¤Î¤¿¤á¤Î½èÍý¤Ï makecssBefore ´Ø¿ô¤Ç¹Ô¤ï¤»¤Þ¤·¤¿¡£
animate ¥á¥½¥Ã¥É¤Ï¡¢¥¢¥Ë¥á³«»ÏÁ°¤ÎÍ×ÁǤÎÍÍ¡¹¤Ê°ÀÃ͡ʥ¹¥¿¥¤¥ë°ÀÃͤò´Þ¤à¡£width¡¢margin etc.¡Ë¤ò¥¢¥Ë¥á³«»ÏÃͤȤ·¤ÆºÎÍѤ·¤Þ¤¹¡£¡Ê¤â¤·°¿¤ë¥×¥í¥Ñ¥Æ¥£¤Î°ÀÃͤ¬¤Ê¤¤¾ì¹ç¤Ë¤Ï³«»ÏÃͤò 0 ¤È¤·¤Þ¤¹¡£¡Ë¤³¤Î¤¿¤áɽ¼¨¤µ¤ì¤Æ¤¤¤ëÍ×ÁǤ˥¢¥Ë¥á¡¼¥·¥ç¥ó¤òŬÍѤ¹¤ë¾ì¹ç¤Ë¤Ï¡¢°ìÈÌŪ¤Ë¤Ï¥¢¥Ë¥áÁ° CSS ÃͤòÀßÄꤹ¤ëɬÍפϤ¢¤ê¤Þ¤»¤ó¡£
Î㤨¤Ð¥¢¥Ë¥áÂоÝÍ×ÁÇ¤Ë width="380px" ¤¬ÀßÄꤵ¤ì¤Æ¤¤¤ì¤Ð¡¢¥Ö¥é¥¦¥¶¤¬¤½¤ÎÃͤò²ò¼á¤·¤Æ¡¢380px Éý¤ÎÍ×ÁǤòɽ¼¨¤·¤Æ¤¤¤ë¤ï¤±¤Ç¤¹¡£¤³¤Î¾ì¹ç width ¥×¥í¥Ñ¥Æ¥£¤Î¥¢¥Ë¥á³«»ÏÃͤ¬²¿¤â»ØÄꤵ¤ì¤Æ¤¤¤Ê¤±¤ì¤Ð¡¢ animate ¥á¥½¥Ã¥É¤ÏÍ×ÁǸÇÍÃͤǤ¢¤ë 380px ¤ò width ¥×¥í¥Ñ¥Æ¥£¤Î¥¢¥Ë¥á³«»ÏÃͤȤ·¤Þ¤¹¡£
¤È¤³¤í¤¬±£Êäµ¤ì¤Æ¤¤¤ëÍ×ÁǤ˥¢¥Ë¥á¡¼¥·¥ç¥ó¤òŬÍѤ¹¤ë¾ì¹ç¤Ë¤ÏÍÍÁ꤬°Û¤Ê¤Ã¤Æ¤¤Þ¤¹¡£
±£Êäµ¤ì¤Æ¤¤¤ëÍ×ÁǤòɽ¼¨¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¾ì¹ç¤Ç¤â¡¢¤½¤Î±£Ê䬰ìÈÌŪ¤Ë¤½¤¦¤Ç¤¢¤ë¤è¤¦¤Ë display = "none" »ØÄê¤Ë¤è¤Ã¤Æ¹Ô¤ï¤ì¤Æ¤¤¤ë¾ì¹ç¤Ë¤Ï¡¢ÂоÝÍ×ÁǤθÇͤΰÀÃͤϸºß¤·Â³¤±¤Þ¤¹¡£Í×ÁǤ¬Ã±¤ËÈóɽ¼¨¤Ë¤Ê¤Ã¤Æ¤¤¤ë¤À¤±¤Ç¡¢display = "none" °Ê³°¤Î°ÀÃͤÏɽ¼¨¤µ¤ì¤Æ¤¤¤¿»þ¤ÎÃͤ¬ÊÝ»ý¤µ¤ì³¤±¤Þ¤¹¡£
¤³¤Î¾õÂÖ¤ËÂФ·¤Æ±£ÊÃÍ×ÁǤòɽ¼¨¤µ¤»¤ë animate ¥á¥½¥Ã¥É¤òŬÍѤ¹¤ë¤È¡¢animate ¥á¥½¥Ã¥É¤Î»ÅÍ;塢Í×ÁǸÇÍÃͤ¬¥¢¥Ë¥á³«»ÏÃͤˤʤë¤Î¤Ç¤¹¤«¤é¡¢¥¢¥Ë¥á¥×¥í¥Ñ¥Æ¥£¤¬Í×ÁǸÇÍÃͤȤʤäƤ·¤Þ¤¤¤Þ¤¹¡£¤³¤Î·ë²Ì¡¢0 ¤«¤é¥¹¥¿¡¼¥È¤µ¤»¤¿¤«¤Ã¤¿¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ï°ú¤µ¯¤³¤µ¤ì¤Þ¤»¤ó¡£
½¾¤Ã¤Æ¡¢±£ÊÃÍ×ÁǤòɽ¼¨¤µ¤»¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¾ì¹ç¡¢¥¢¥Ë¥á³«»ÏÃͤò animate ¥á¥½¥Ã¥Éµ¯Æ°Á°¤Ë¶¯À©Åª¤Ë»ØÄꤹ¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£¤³¤¦¤·¤Æ¶¯À©Åª¤Ë CSS Ãͤò»ØÄꤹ¤ë¤¿¤á¤Î cssBefore ¥ª¥Ö¥¸¥§¥¯¥È¤¬É¬Íס¦ÉԲķç¤È¤Ê¤ê¤Þ¤¹¡£
¤µ¤Æ¡¢¤½¤Î cssBefore ¤Ï¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î½é´üÃͤòÄê¤á¤ë¤ï¤±¤Ç¤¹¤«¤é¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎÂÖÍͤ˱þ¤¸¤Æ¡Ê ¤Ä¤Þ¤êµ¯½ªÅÀ°ÌÃ֤˱þ¤¸¤Æ ¡ËÊѲ½¤·¤Þ¤¹¡£¥Ü¥Ã¥¯¥¹Í×ÁǤκ¸¾å¡¢¾åÊÕ¡¢º¸Êդʤɤòµ¯½ªÅÀ¤È¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¾ì¹ç¤Ë¤ÏÌäÂê¤Ë¤Ê¤ê¤Þ¤»¤ó¤¬¡¢Î㤨¤Ð¡¢¥¢¥Ë¥á¤¬Í×ÁǤÎÃæ¿´°ÌÃÖ¤«¤é»Ï¤Þ¤ë¾ì¹ç¤Ë¤Ï¡¢top ¤È left ¤Î³«»ÏÃͤò¥Ü¥Ã¥¯¥¹ÆâÍÆÊÕ¡¢¥Ü¡¼¥À¡¼ÊÕ¤¢¤ë¤¤¤Ï margin ÊդޤǤΡ¢Éý¤ä¹â¤µ¤ÎȾʬ¤ÎÃͤËÀßÄꤹ¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£¤Þ¤¿¡¢³«»ÏÅÀ¤¬¥Ü¥Ã¥¯¥¹¤Î±¦¾å¤Î¾ì¹ç¤Ë¤Ï¡¢left ¤Î³«»ÏÃͤò¥Ü¥Ã¥¯¥¹ÆâÍÆÊÕ¡¢¥Ü¡¼¥À¡¼ÊÕ¤¢¤ë¤¤¤Ï margin ÊդޤǤÎÉý¤ËÀßÄꤹ¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£
°Ê¾å¤Ë½Ò¤Ù¤¿±£ÊþõÂ֤ˤª¤±¤ë cssBefore ¥ª¥Ö¥¸¥§¥¯¥È¤ÎºîÀ®¤ò makecssBefore ´Ø¿ô¤Î¸åȾ¤Ç¹Ô¤Ã¤Æ¤¤¤Þ¤¹¡£
¤Ê¤ª¡¢¥¢¥Ë¥á¥×¥í¥Ñ¥Æ¥£Ãͤò toggle ¤ä show ¤Ë»ØÄꤹ¤ë¤È¡¢animate ¥á¥½¥Ã¥É¤ÏÍ×ÁǤθÇͰÀÃͤò¥¢¥Ë¥á¤Î½ªÎ»ÃͤȤ·¤ÆÍøÍѤ·¤Þ¤¹¡£¤³¤ÎÍøÊØÀ¸Î¤Ë¡¢¥¢¥Ë¥á¥×¥í¥Ñ¥Æ¥£ÃÍ¤Ë toggle ¤ò¿ÍѤ¹¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
slideToggleEx ¥×¥é¥°¥¤¥ó¤Ç¤Ï°Ê²¼¤Î 4 ²Õ½ê¤Ç $.data ¥á¥½¥Ã¥É¤òÍøÍѤ·¤Þ¤·¤¿¡£
¤³¤Î¥á¥½¥Ã¥ÉÍøÍѤ·¤¿ÌÜŪ¤Ï¡¢¤º¤Ð¤ê¥³¡¼¥É¿Ê¹Ô¤Î¸úΨ²½/¹â®²½¤Ç¤¹¡£¤³¤Î¥á¥½¥Ã¥É¤ò»È¤¦¤³¤È¤Ë¤è¤ê¡¢ÉÔɬÍ×¤ËÆ±¤¸·×»»¤ò·«¤êÊÖ¤µ¤»¤¿¤¯¤Ê¤«¤Ã¤¿¤Î¤Ç¤¹¡£
¾å¤Î 4 Îã¤Ï³§Æ±ÍͤʷÁ¼°¤ò¼è¤Ã¤Æ¤¤¤ë¤Î¤Ç¡¢¤É¤ì¤« 1 ¤Äʬ¤«¤ì¤Ð¾¤Ï¿ä¤·¤ÆÃΤë¤Ù¤·¤Ç¤¹¡£¤Ê¤Î¤Ç¡¢¤³¤³¤Ç¤Ï°ìÈֺǸå¤Î 35 ¹Ô¤Ç»È¤Ã¤¿ $.data ¥á¥½¥Ã¥É¤Ë¤Ä¤¤¤Æ¿¨¤ì¤Æ¤ª¤¤Þ¤¹¡£
$.data(o.el,"Before" + o.type) ¤Ï¡¢¥¢¥Ë¥áÂоÝÍ×ÁÇ o.el ¤Ë "BeforeN" ¡Ê N ¤Ï type ÃÍ ¡Ë¤È¸À¤¦Ì¾¾Î¤Ç´ØÏ¢¤Å¤±¤é¤ì¤¿¥ª¥Ö¥¸¥§¥¯¥È¤¬¤¢¤ë¾ì¹ç¤Ë¤Ï¡¢¤½¤Î¥ª¥Ö¥¸¥§¥¯¥È¡Ê cssBefore ¥ª¥Ö¥¸¥§¥¯¥È¡Ë¤òÊÖ¤·¡¢¤½¤ì¤¬º¸ÊդΠo.cssBefore ¤ËÂåÆþ¤µ¤ì¤Þ¤¹¡£°ìÊý¡¢´ØÏ¢¤Å¤±¤é¤ì¤¿¾ðÊ󤬤ʤ±¤ì¤Ð false ¤òÊÖ¤¹¤Î¤Ç¡¢¼¡¤Ë¤¢¤ë || ±é»»»Ò¤¬Æ¯¤¤Þ¤¹¡£
|| ±é»»»Ò¤¬ºîÍѤ¹¤ë¤È¡¢¥ª¥Ú¥é¥ó¥É¤Ç¤¢¤ë makecssBefore ´Ø¿ô¤¬¼Â¹Ô¤µ¤ì¤Þ¤¹¡£
¤³¤Î´Ø¿ô¤Ç¤ÏºÇ¸å¤Î¹Ô¤Ë $.data ¥á¥½¥Ã¥É¤¬¤¢¤ë¤Î¤Ç¡¢´Ø¿ô¤Ë¤è¤Ã¤Æ»»½Ð¤·¤¿¥ª¥Ö¥¸¥§¥¯¥È¤ò¡¢¤³¤Î¥á¥½¥Ã¥É¤Ë¤è¤ê¥¢¥Ë¥áÂоÝÍ×ÁÇ o.el ¤Ë "BeforeN" ̾¤Ç´ØÏ¢¤Å¤±¤Þ¤¹¡£´ØÏ¢¤Å¤±¤é¤ì¤¿¥ª¥Ö¥¸¥§¥¯¥È¤Ï return ¤Ë¤è¤êº¸ÊդΠo.cssBefore ¥ª¥Ö¥¸¥§¥¯¥È¤ËÊÖ¤µ¤ì¤Þ¤¹¡£
¤³¤¦¤·¤Æ¡¢Æ±°ìÍ×ÁǤËÂФ¹¤ëƱ°ì type ¤Î slideToggleEx ¥á¥½¥Ã¥Éµ¯Æ°»þ¤Ë¤Ï¨¡¨¡¨¡¼ÂºÝ¡¢É½¼¨/±£Êäϥ»¥Ã¥È¤ÇÍú¹Ô¤µ¤ì¤ë¤Ï¤º¤À¤«¤é¡¢Â¿¤¯¤Î¾ì¹ç slideToggleEx ¥á¥½¥Ã¥É¤Ï¡¢Æ±°ìÍ×ÁǤËÂФ·¤ÆÆ±°ì type ÃͤǷ«¤êÊÖ¤·¼Â¹Ô¤µ¤ì¤Þ¤¹¡£¨¡¨¡¨¡ºÇ½é¤Î¸Æ¤Ó½Ð¤·»þ¤Ë¤À¤± makecssBefore ´Ø¿ô¤¬¼Â¹Ô¤µ¤ì¡¢ÆóÅÙÌܰʹߤϸÇͤÎ̾¾Î¤ÇÍ×ÁǤ˴ØÏ¢¤Å¤±¤é¤ì¤Æ¤¤¤ë¥ª¥Ö¥¸¥§¥¯¥ÈÃͤ¬ÍøÍѤµ¤ì¤Æ¡¢ makecssBefore ´Ø¿ô¤Ï¼Â¹Ô¤µ¤ì¤Þ¤»¤ó¡£¤³¤ì¤¬¥³¡¼¥É¿Ê¹Ô¤Î¡ÖºÇ½é¤Î¡×¡Ö¸úΨ²½¡×¤Ç¤¢¤ê¡Ö¹â®²½¡×¤Ç¤¹¡£
$.data ¥á¥½¥Ã¥É¤òÍøÍѤ·¤¿¤³¤È¤Ë¤è¤ë¸úΨ²½¤Ï¡¢¤³¤ì¤À¤±¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¡£°¿¤ëÍ×ÁÇ£Á¤¬ slideToggleEx ¤Ë¤è¤Ã¤ÆÉ½¼¨/±£Ê䵤졢¼¡¤ËÊ̤ÎÍ×Áǣ¤¬¤ä¤Ï¤ê slideToggleEx ¤Çɽ¼¨/±£Ê䵤줿¤È²¾Äꤷ¤Þ¤¹¡£¤³¤Î¸å¤ËºÆ¤ÓÍ×ÁÇ£Á¤Ë slideToggleEx ¥á¥½¥Ã¥É¤òŬÍѤ·¤¿¾ì¹ç¤Ë¡¢¹¹¤Ê¤ë¸úΨ²½¡¦¹â®²½¤¬È¯´ø¤µ¤ì¤Þ¤¹¡£
´û¤Ë $.data ¥á¥½¥Ã¥É¤Ë¤è¤ë£Á¡¢£Â³Æ¡¹¤ÎÍ×ÁǤؤΥª¥Ö¥¸¥§¥¯¥È¤Î´ØÏ¢¤Å¤±¤ÏºÑ¤ó¤Ç¤¤¤Þ¤¹¤«¤é¡¢Í×Áǣ¤Ë³¤±¤Æ£Á¤Ë slideToggleEx ¥¢¥Ë¥á¤òŬÍѤ·¤¿»þ¤Ë¤Ï¡¢´û¤Ë£Á¤Ë´ØÏ¢¤Å¤±¤é¤ì¤Æ¤¤¤ë¥ª¥Ö¥¸¥§¥¯¥È¤¬ÍøÍѤµ¤ì¡¢makecssBefore ´Ø¿ô¤Ïµ¯Æ°¤µ¤ì¤Þ¤»¤ó¡£¤³¤¦¤·¤ÆÌµÂ̤ʥ³¡¼¥É¿Ê¹Ô¤¬ÇÓ½ü¤µ¤ì¤Þ¤¹¡£
°Ê¾å¤Î¤³¤È¤¬ 4 ¤Ä¤Î´Ø¿ô¤ËÂФ·¤Æ¹Ô¤ï¤ì¤ë¤Î¤Ç¡¢¸½ºßÁàºîÂоݤȤʤäƤ¤¤ëÊǤ¬¥ê¥í¡¼¥É¤µ¤ì¤Ê¤¤¸Â¤ê¡¢slideToggleEx ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬°ìÅÙŬÍѤµ¤ì¤¿Í×ÁǤˤª¤¤¤Æ¤Ï¡¢ slideToggleEx Æâ¤Ë¤¢¤ëÍÍ¡¹¤Ê´Ø¿ô¤òËØ¤É¼Â¹Ô¤¹¤ëɬÍפ¬¤Ê¤¯¤Ê¤ê¤Þ¤¹¡£¤³¤¦¤·¤Æ¥³¡¼¥É¿Ê¹Ô¤¬Â礤¤Ë¹â®²½¤µ¤ì¤Þ¤¹¡£¹â®²½¤Ï¸À¤¤´¹¤¨¤ì¤Ð¾Ê¥¨¥Í¤Ç¤â¤¢¤ë¤Î¤Ç¡¢Î®¹Ô¤Î¸ÀÍÕ¤ò»È¤¨¤Ð¡Ö¥¨¥³¡×¤Ê¥³¡¼¥É¿Ê¹Ô¤¬¹Ô¤ï¤ì¤ë¤È¸À¤Ã¤Æ¤âÎɤ¤¤«¤â¤·¤ì¤Þ¤»¤ó¡£
¤µ¤Æ¡¢slideToggleEx ¤ò»È¤¦¥·¡¼¥ó¤Ï¡¢¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤·¤Æ°¿¤ë¥³¥ó¥Æ¥ó¥Ä¤òɽ¼¨¤·¤¿¤ê±£Ê乤ë¾ì¹ç¤¬Â¿¤¤¤È»×¤ï¤ì¤Þ¤¹¡£¤½¤¦¤À¤È¤¹¤ì¤Ð¡¢¤½¤Î°ìÏ¢¤ÎÁàºî¡Ê ¥¯¥ê¥Ã¥¯¥¤¥Ù¥ó¥È¤ÎÅÐÏ¿¡¦°¿¤ë¥³¥ó¥Æ¥ó¥Ä¤Î»ØÄꡦslideToggleEx ¥á¥½¥Ã¥É¤ÎÍ×ÁǤؤÎŬÍÑ ¡Ë¤ò¥³¡¼¥É²½¤·¤ÆÈ¾¼«Æ°²½¤·¤Æ¤·¤Þ¤¨¤Ð¡¢ÂçÊѳڤˤʤê¤Þ¤¹¡£
¼¡¤Ë½Ò¤Ù¤ë¥³¡¼¥É¤Ï¡¢¤³¤Î°ìÏ¢¤ÎÁàºî¡¢¤Ä¤Þ¤ê¥Ü¥¿¥ó¤Ø¤Î¥¯¥ê¥Ã¥¯¥¤¥Ù¥ó¥ÈÅÐÏ¿¤È¡¢¥¯¥ê¥Ã¥¯»þ¤Î slideToggleEx ¥á¥½¥Ã¥ÉŬÍÑÂÐ¾Ý¤ÎÆÃÄê¤È¤½¤Î¥á¥½¥Ã¥É¤Îµ¯Æ°¤ò¤Þ¤È¤á¤Æ¹Ô¤¦¤â¤Î¤Ç¤¹¡£
¶ñÂÎŪ¤Ë¤Ï ¡Ö °¿¤ë¥Ü¥¿¥ó¤¬¥¯¥ê¥Ã¥¯¤µ¤ì¤¿¤é¡¢slideToggleEx ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬Å¬ÍѤµ¤ì¤ë°¿¤ëÍ×ÁǤ¬ÆÃÄꤵ¤ì¡¢slideToggleEx ¥á¥½¥Ã¥É¤¬µ¯Æ°¤¹¤ë ¡× ¤½¤Î¤è¤¦¤Ê Javascript ¥³¡¼¥É¤Ç¤¹¡£
¤½¤Î¥³¡¼¥É¤Ç¤Ï¡¢Æ±°ì¥Ú¡¼¥¸Æâ¤Ë¸ºß¤¹¤ë¡¢Ê£¿ô¤ÎƱ°ìËô¤Ï°Û¤Ê¤ë type ¤Î slideToggleEx ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¡¢¥È¥ê¥¬¡¼¥Ü¥¿¥ó¤È¥¢¥Ë¥áÂоݤò°ì³ç¤·¤ÆÅÐÏ¿¤·¤Þ¤¹¡£slideToggleEx ¤Î°ú¿ô¤Ç¤¢¤ë¥¢¥Ë¥á·Ñ³»þ´Ö¡¢easing ´Ø¿ôµÚ¤Ó¥¢¥Ë¥á½ªÎ»¸å¤Î¼Â¹Ô´Ø¿ô¤Ï¡¢¥³¡¼¥É¤ÎËÁƬ¤ÇÅÐÏ¿¤·¡¢¤³¤ì¤ò slideToggleEx ¥á¥½¥Ã¥É¤ËÅϤ¹¤è¤¦¤Ë¤·¤Æ¤¤¤Þ¤¹¡£
¤½¤â¤½¤â¥³¡¼¥ÉºîÀ®Åö½é¤Ç¤Ï¡¢slideToggleEx ¥á¥½¥Ã¥É¤Î°ú¿ô¤ò²¿¤È¤« HTML ʸÆâ¤Ç¹Ô¤¤¤¿¤¤¤È¹Í¤¨¤Þ¤·¤¿¡£¥¯¥é¥¹»ØÄê¤Ë¤è¤Ã¤Æ¡¢¥¢¥Ë¥á¤Îµ¯½ªÅÀ ¡Ê type ¡Ë ¤ò»ØÄꤹ¤ë¤À¤±¤Ç¤Ï¤Ê¤¯¤½¤Î¾¤Î°ú¿ô¤â¤Þ¤È¤á¤Æ»ØÄꤷ¤¿¤¤¤È»×¤¤¤Þ¤·¤¿¡£
¤·¤«¤·¡¢¥¯¥é¥¹Ì¾Ê¸»úÎó¤ÎÃæ¤Ë¡¢duration¡¢easing ¤Ê¤É¤Îʸ»ú¤ò¤½¤ÎÅÔÅÙÁȤ߹þ¤à¤È¡¢¾éĹ¤Ê¥¯¥é¥¹Ì¾»ØÄê¤È¤Ê¤Ã¤Æ¤·¤Þ¤¤¡¢¤¤¤«¤Ë¤âÌÌÅݤǤ¹¤·¡¢ÃͤÀ¤±¤òÍåÎ󤹤ë¤è¤¦¤Ë¤·¤Æ¤âÈÑ»¨¤Ç½çÈÖ¤ò´Þ¤á¤Æ¤ï¤«¤ê¤Ë¤¯¤¯¤Ê¤ê¤Þ¤¹¡£¤½¤ì¤Ë¥Ü¥¿¥ó¥¯¥ê¥Ã¥¯¤Ë¤è¤ëÍ×ÁǤÎɽ¼¨/±£ÊÃÁàºî¤Ë¤ª¤¤¤Æ¡¢¤½¤ÎÅÔÅÙ duration ¤ä easing ¤ÎÃͤòÊѲ½¤µ¤»¤ëɬÍ×À¤¬¹â¤¤¤È¤Ï»×¤¨¤Þ¤»¤ó¡£
°Ê¾å¤«¤é¡¢¥¯¥é¥¹Ì¾¤ÎÃæ¤Ë slideToggleEx ¥á¥½¥Ã¥É¤Î°ú¿ô¤òÀ¹¤ê¹þ¤à¤³¤È¤Ï¤ä¤á¤Þ¤·¤¿¡£
¤Ê¤ª¡¢¤³¤³¤Ë¤ª¤±¤ë duration Åù¤Î»ØÄê¤Ï¡¢¤³¤³¤ÇÂоݤȤ·¤Æ¤¤¤ë¡Ö ¥Ü¥¿¥ó¥¯¥ê¥Ã¥¯¤Ë¤è¤Ã¤Æµ¯Æ°¤µ¤ì¤ë slideToggleEx µ¯Æ°ÊýË¡ ¡× ¤Ë¤ª¤¤¤Æ¡¢slideToggleEx ¥á¥½¥Ã¥É¤Î°ú¿ô¤ò»ØÄꤹ¤ë¤â¤Î¤Ç¤¹¡£Â¾Êý¡¢slideToggleEx ¥×¥é¥°¥¤¥ó¥³¡¼¥É¤Ë¤ª¤±¤ë $.fn.slideToggleEx.opts ¥ª¥Ö¥¸¥§¥¯¥ÈÆâ¤Ç¤â duration Åù¤ò»ØÄꤷ¤Æ¤¤¤Þ¤¹¤¬¡¢¤³¤ì¤Ï slideToggleEx ¥á¥½¥Ã¥É¤Î°ìÈÌŪ¤Ê´ûÄêÃͤòÀßÄꤹ¤ë¤â¤Î¤Ç¤¹¡£
²¼¤Î¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È±£ÊþõÂ֤ˤ¢¤ë¤½¤Î¥³¡¼¥É¤¬¡¢±¦²¼¤«¤éŸ³«¤µ¤ì¡¢ºÆ¤Ó¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È±¦²¼¤Ë±£¤ì¤Þ¤¹¡£¡Êtype 3¡Ë
¢§¤³¤Î¥³¡¼¥É¤Ï¡¢¥á¥½¥Ã¥É¥×¥é¥°¥¤¥ó¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¤¬¡¢¥×¥é¥°¥¤¥ó¤È¥»¥Ã¥È¤Ç include ¡¡¥Õ¥¡¥¤¥ë¤ËÅÐÏ¿¤·¤Æ¤ª¤¯¤È½ÅÊõ¤·¤Þ¤¹¡£¤³¤ì¤¬¤Ê¤¤¤È fireSlideToggleEx-n ¤Î¥¯¥é¥¹»ØÄê¤ò ¡¡¤·¤Æ¤â next sibling Í×ÁǤʤɤò slideToggleEx ¤ÎŬÍÑÂоݤȤ¹¤ë¤³¤È¤Ï½ÐÍè¤Þ¤»¤ó¡£ // button Í×ÁǤؤΥ¯¥ê¥Ã¥¯¥¤¥Ù¥ó¥ÈÅÐÏ¿µÚ¤Ó slideToggleEx ¥á¥½¥Ã¥ÉŬÍÑÂоݤΥԥ寥¢¥Ã¥× // ¥¯¥ê¥Ã¥¯¥¤¥Ù¥ó¥Èµ¯Æ°¥Ü¥¿¥ó¤È slideToggleEx ŬÍÑÂоݤòÅÐÏ¿¤¹¤ë¡£ 124:// regist click Event to fire slideToggleEx() for nextBlock 125:$(function(){ // ÅöÁ³ DOM ¤¬ Ready ¤µ¤ì¤Æ¤«¤éµ¯Æ°¤¹¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£ ¡¡¡¡¡¡// ½é´üÃÍÀßÄê 126:¡¡var duration = 1000, easing = null, complete = function(){}, clk = {}; 127:¡¡function func(j){ 128:¡¡¡¡$.each(clk[j],function(i){ ¡¡ ¡¡¡¡// target ¥ª¥Ö¥¸¥§¥¯¥È¤Ï slideToggleEx Âоݤθġ¹¤Î¥Î¡¼¥É 1 ¤Ä¤À¤±¤ò³ÊǼ¤¹¤ë¡£ 129:¡¡¡¡¡¡var $target={}; ¡¡¡¡¡¡ ¡¡// $target ¥ª¥Ö¥¸¥§¥¯¥È¤Î j ¥×¥í¥Ñ¥Æ¥£¤Ë slideToggleEx ÂоݥΡ¼¥É¤ò³ÊǼ¤¹¤ë¡£ ¡¡¡¡¡¡ ¡¡// fireSlideToggleEx-x ¥¯¥é¥¹»ØÄꤵ¤ì¤¿¥Ü¥¿¥óÍ×ÁǤ¬¥Ö¥í¥Ã¥¯Í×ÁǤξì¹ç¤Ë¤Ï ¡¡¡¡¡¡ ¡¡// next sibling¤ò block °Ê³°¤Î inline Í×ÁǤξì¹ç¤Ë¤Ï¿ÆÍ×ÁǤΠ¡¡¡¡¡¡ ¡¡// next sibling Í×ÁǤò slideToggleEx ÂоݤȤ¹¤ë¡£ 130:¡¡¡¡¡¡$target[i] = $(this).css("display")=="block" ? $(this).next() : $(this).parent().next(); 131:¡¡¡¡¡¡if ($target[i].length) { 132:¡¡¡¡¡¡¡¡$(this).click(function(){ ¡¡¡¡¡¡¡¡¡¡¡¡¡¡// slideToggleEx ¤òµ¯Æ°¤¹¤ë¡£ 133:¡¡¡¡¡¡¡¡¡¡$target[i].slideToggleEx(j, duration, easing, fn); 134:¡¡¡¡¡¡¡¡¡¡$(this).blur(); // ¥Ü¥¿¥óÍ×ÁǤΥե©¡¼¥«¥¹¤ò³°¤¹ 135:¡¡¡¡¡¡¡¡}); 136:¡¡¡¡¡¡} 137:¡¡¡¡}); 138:¡¡} 139:¡¡for (var j=0; j<9; j++){ // 0 ¤«¤é 8 Ëø¤Î½ä²ó½èÍý ¡¡¡¡¡¡¡¡// ¥¯¥ê¥Ã¥¯¥¤¥Ù¥ó¥È¤òÅÐÏ¿¤¹¤ë¥ª¥Ö¥¸¥§¥¯¥È clk ¤Î i ¥×¥í¥Ñ¥Æ¥£¤òºîÀ®¤·¡¢ ¡¡¡¡¡¡¡¡// ¤½¤ì¤Ë "fireSlideToggleEx-i"¡Ê i ¤Ï 0¡Á8 ¡Ë class ̾¤Î¥Î¡¼¥É¤ò¤â¤Ä ¡¡ ¡¡¡¡// jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤òÅÐÏ¿¤¹¤ë¡£¤³¤ì¤Ë¤è¤ê¡¢¥Ú¡¼¥¸Æâ¤Ë¤¢¤ë ¡¡¡¡ ¡¡ // fireSlideToggleEx-n ¥¯¥é¥¹Ì¾¤ò»ý¤Ä¥Î¡¼¥É¤òª¤¨¤ë¡£ 140:¡¡¡¡clk[j] = $(".fireSlideToggleEx-" + j); 141:¡¡ ¡¡if (!clk[j].length) continue; ¡¡¡¡¡¡¡¡// i ÈÖ̾¤Î¥Î¡¼¥É¤¬¤Ê¤±¤ì¤Ð loop ¤ÎÀèÆ¬¹Ô¤ËÌá¤Ã¤Æ i++ ¤¹¤ë¡£ 142:¡¡¡¡func(j); 143:¡¡¡¡clk[j].hover( // ¥Þ¥¦¥¹¥ª¡¼¥Ð¡¼/¥¢¥¦¥È»þ¤Î¥Ü¥¿¥óÇØ·Ê¿§¤ÎÊѹ¹ 144:¡¡¡¡¡¡function(){$(this).css({backgroundColor:"pink"})}, 145:¡¡¡¡¡¡function(){$(this).css({backgroundColor:""})} 146:¡¡¡¡) ¡¡¡¡¡¡¡¡// ¥Þ¥¦¥¹¤¬²¡¤·²¼¤²¤é¤ì¤¿¾ì¹ç¤Î¿§Âؤ¨ 147:¡¡¡¡.mousedown(function(){$(this).css('background-color','palegreen')}) 148:¡¡} 149:}); 150:});
¤è¤¯¸«¤«¤±¤ë¥¯¥í¡¼¥¸¥ã¡¼¤ÎÎã¤È¤·¤Æ¼¡¤Î¥«¥¦¥ó¥¿¡¼¤¬¤¢¤ê¤Þ¤¹¡£
¢£ ¥«¥¦¥ó¥¿¡¼¥¯¥í¡¼¥¸¥ã¡¼
var counter = (function(){
var id = 0;
return function(){ return id++}
})();
// ¤³¤Î counter ´Ø¿ô¤ò¼¡¤Î¤è¤¦¤Ë¼Â¹Ô¤¹¤ë¤È¡¢¤½¤ÎÅÔÅٰۤʤëÃͤ¬ÊÖ¤µ¤ì¤ë¤Î¤Ç¡¢
// ¥æ¥Ë¡¼¥¯¥«¥¦¥ó¥¿¡¼¤È¤·¤Æ»È¤¦¤³¤È¤¬½ÐÍè¤Þ¤¹¡£
/* 1 ÅÙÌÜ */ counter(); // ÊÖÃÍ¤Ï 0
/* 2 ÅÙÌÜ */ counter(); // ÊÖÃÍ¤Ï 1
¡¦¡¦¡¦¡¦
¤³¤Î¥«¥¦¥ó¥¿¡¼¥¯¥í¡¼¥¸¥ã¡¼¤Ï¡¢³°¤«¤é¥«¥¦¥ó¥¿¡¼ÃͤòÏ®¤ì¤Ê¤¤¤¿¤á¡¢¤Þ¤µ¤Ë¥æ¥Ë¡¼¥¯¤Ê¡ÖÊѤ¨¤é¤ì¤Ê¤¤¡×¥«¥¦¥ó¥¿¡¼¤È¤·¤Æ»È¤¨¤ë¤³¤È¤«¤é¡¢°ìÉô¤Ç¤Ï¿ä¾©¤µ¤ì¤Æ¤¤¤Þ¤¹¡£¡Ê¡ØJavascript Âè 5 ÈÇ¡ÙÅù¡Ë
³Î¤«¤Ë¡¢¤³¤Î counter ´Ø¿ô¤òǤ°Õ¤Î¥³¡¼¥É¤ËÁȤ߹þ¤ó¤Ç¤½¤ÎÃæ¤Ç¥«¥¦¥ó¥¿¡¼¤È¤·¤Æ»È¤¨¤Ð¡¢Ç¤°Õ¤Î¥³¡¼¥É¤¬¸Æ¤Ó½Ð¤µ¤ì¤¿²ó¿ô¤ò³Î¼Â¤Ë¬Äꤹ¤ë¤³¤È¤¬½ÐÍè¤Þ¤¹¡£¡Ê⤷¡¢¤½¤Î¥³¡¼¥É¤òºÆÆÉ¤ß¹þ¤ß¤¹¤ì¤Ð¥¼¥í¤ËÌá¤Ã¤Æ¤·¤Þ¤¤¤Þ¤¹¤¬¡¦¡¦¡¦¡Ë
¾å¤òƧ¤Þ¤¨¤Æ¡¢´ñ¿ô / ¶ö¿ô¤ò¥È¥°¥ë¤ÇÊÖ¤¹¥¯¥í¡¼¥¸¥ã¡¼¤òºî¤Ã¤Æ¤ß¤Þ¤·¤¿¡£
¢£ ´ñ¿ô/¶ö¿ô¥È¥°¥ë¥¯¥í¡¼¥¸¥ã¡¼
var state = (function(){
var odd = 1;
return function(){ return odd++ % 2 == 1 ? true : false }
})()
¤³¤Î state ´Ø¿ô¤ò¼¡¤Î¤è¤¦¤Ë¼Â¹Ô¤¹¤ë¤È¸ò¸ß¤Ë true / false ¤¬ÊÖ¤µ¤ì¤Þ¤¹¡£
/* 1 ÅÙÌÜ */ state(); // ÊÖÃÍ¤Ï true
/* 2 ÅÙÌÜ */ state(); // ÊÖÃÍ¤Ï false
/* 3 ÅÙÌÜ */ state(); // ÊÖÃÍ¤Ï true
/* 4 ÅÙÌÜ */ state(); // ÊÖÃÍ¤Ï false
¡¦¡¦¡¦¡¦
¤³¤³¤Ë false ¤ò¶ö¿ô¡¢true ¤ò´ñ¿ô¤ÈÆÉ¤ßÂØ¤¨¤ì¤Ð¡¢state ´Ø¿ô¤Ï¸ò¸ß¤Ë¶ö¿ô¤È´ñ¿ô¤òÊÖ¤¹¤â¤Î¤È¤Ê¤ê¤Þ¤¹¡£¤·¤«¤â¡¢¤½¤ÎÃͤò³°¤«¤éÁàºî¤¹¤ë¤³¤È¤Ï½ÐÍè¤Þ¤»¤ó¡£
¤³¤ì¤ò¥³¡¼¥ÉÆâ¤ÇÍøÍѤ¹¤ì¤Ð¡¢Î㤨¤Ðµ¯Æ°²ó¿ô¤¬´ñ¿ô²ó¤«¶ö¿ô²ó¤«¤òÊÖ¤·¤Æ¡¢¾ì¹çʬ¤±¤ò¹Ô¤¦¤³¤È¤¬½ÐÍè¤Þ¤¹¡£
¤µ¤Æ¡¢°Ê¾å¤Î 2 ¤Ä¤Î¥¯¥í¡¼¥¸¥ã¡¼¤«¤é¡¢²¿¸Î¤³¤ì¤é¤¬Ã±¤Ê¤ë´Ø¿ô¤Ç¤Ï¤Ê¤¯¡Ö¥¯¥í¡¼¥¸¥ã¡¼¡×¤È¸À¤ï¤ì¤ë¤Î¤«¡¢¤½¤Î½ê°Ê¤ò³Ø½¬¤·¤è¤¦¤È»×¤¤¤Þ¤¹¡£
¤³¤ì¤é¤Î 2 ¤Ä¤Î´Ø¿ô¤Ë¶¦Ä̤¹¤ë¤³¤È¤Ï¡¢Æþ¤ì»Ò¤Ë¤Ê¤Ã¤¿´Ø¿ô¤¬¥°¥í¡¼¥Ð¥ëÊÑ¿ô¤ËÊÖ¤µ¤ì¤Æ¤¤¤ë¤³¤È¤Ç¤¹¡£¤½¤Î¤¿¤á¡¢³°Â¦¤Î´Ø¿ô¤Î¼Â¹Ô¤¬½ªÎ»¤·¤Æ¤â¡¢Æþ¤ì»Ò¤Ë¤Ê¤Ã¤¿¤½¤ì¤¾¤ì¤Î´Ø¿ô¤ËÂФ¹¤ë¥°¥í¡¼¥Ð¥ë¥¹¥³¡¼¥×¤«¤é¤Î»²¾È¤¬À¸¤Â³¤±¤Þ¤¹¡£
¤³¤¦¤·¤Æ¥°¥í¡¼¥Ð¥ë´Ä¶¤«¤é¡¢¤¤¤Ä¤Ç¤âÆþ¤ì»Ò¤Ë¤Ê¤Ã¤¿´Ø¿ô¤Ë¥¢¥¯¥»¥¹¤Ç¤¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
¤Ê¤ª¡¢´Ø¿ô¤¬¥ê¥Æ¥é¥ëɽµ¤µ¤ì¤Æ¤¤¤ë¤³¤È¤ÏËܼÁ¤Ë¤Ï²¿¤é´Ø·¸¤¢¤ê¤Þ¤»¤ó¡£¼¡¤Î¤è¤¦¤Ë½ñ¤¤¤Æ¤â¥¯¥í¡¼¥¸¥ã¡¼¤Ç¤¢¤ë¤³¤È¤Ë²¿¤éÂØ¤ï¤ê¤Ï¤Ê¤¯¡¢Æ±°ì¤Îµóư¤ò¤¹¤ë¤«¤é¤Ç¤¹¡£¥ê¥Æ¥é¥ëɽµ¤ÎÊý¤¬´Ê·é¤ËƱ°ì¤Î¤³¤È¤òɽ¸½¤Ç¤¤ë¤Ë²á¤®¤Þ¤»¤ó¡£
function state (){
var odd = 1;
return function(){ return odd++ % 2 == 1 ? true : false }
}
var log = state();
/* 1 ÅÙÌÜ */ log() // result¡§true
/* 2 ÅÙÌÜ */ log() // result¡§false
/* 3 ÅÙÌÜ */ log() // result¡§true
/* 4 ÅÙÌÜ */ log() // result¡§false
¡¦¡¦¡¦¡¦
¤³¤³¤Ç¡¢¤Þ¤º¤Ï¤Ã¤¤ê¤µ¤»¤Ê¤±¤ì¤Ð¤Ê¤é¤Ê¤¤¤³¤È¤Ï¡¢¡Ö ¥¯¥í¡¼¥¸¥ã¡¼ ¡×¤È¸À¤ï¤ì¤ëÉôʬ¤Ï¤É¤³¤Ê¤Î¤«¡¢¤È¤¤¤¦¤³¤È¤Ç¤¹¡£ÃѤº¤«¤·¤Ê¤¬¤é¡¢counter ´Ø¿ô¤ä state ´Ø¿ô¤¬¥¯¥í¡¼¥¸¥ã¡¼¤Ê¤Î¤«¡¢¤½¤ì¤È¤âÆþ¤ì»Ò¤Ë¤Ê¤Ã¤¿´Ø¿ô¤¬¤½¤ì¤Ê¤Î¤«¡¢¤·¤Ð¤é¤¯Íý²ò¤·¤Ê¤¤¤Þ¤Þ»þ¤¬·Ð²á¤·¤Æ¤·¤Þ¤Ã¤¿¤Î¤Ç¡¢¤³¤³¤ÇÌÀ¤é¤«¤Ë¤·¤¿¤¤¤Î¤Ç¤¹¡£
¼Â¤Ï¡¢²þ¤á¤Æ Javascript Âè 5 ÈǤòÆÉ¤ßľ¤·¡¢¤Þ¤¿Èó¾ï¤Ëʬ¤«¤ê¤ä¤¹¤¤¥µ¥¤¥È ¥¯¥í¡¼¥¸¥ã¤È¹â³¬´Ø¿ô ¤ò¤¸¤Ã¤¯¤êÆÉ¤ó¤Ç¡¢¤ä¤Ã¤ÈÍý²ò½ÐÍ褿¤Î¤Ï¡¢¤Ä¤¤ºÇ¶á¤Î¤³¤È¤Ê¤Î¤Ç¤¹¡£
¡Ö ¥¯¥í¡¼¥¸¥ã¡¼¤È¤Ï¡¢¤½¤Î´Ø¿ô¤¬ÄêµÁ¤µ¤ì¤¿´Ä¶¤Ø¤Î»²¾È¤ò»ý¤Ã¤¿´Ø¿ô¤Î¤³¤È ¡×¨¡¨¡¨¡¾åµ¥µ¥¤¥È¡Ø¥¯¥í¡¼¥¸¥ã¤È¹â³¬´Ø¿ô¡Ù¤Î¤³¤ÎÄêµÁ¤¬ÆÞ¤Ã¤¿Æ¬¤ò¤¹¤Ã¤¤ê¤µ¤»¤Æ¤¯¤ì¤Þ¤·¤¿¡£¤Þ¤¿¤è¤¯¤è¤¯ÆÉ¤ßÊÖ¤·¤Æ¤ß¤ë¤È¡¢Javascript Âè 5 ÈÇ ¤Ë¤ª¤¤¤Æ ¡Ö ¥¯¥í¡¼¥¸¥ã¡¼¤È¤·¤Æ¤ÎÆþ¤ì»Ò·¿¤Î´Ø¿ô ¡×¡Êp.142¡Ë¤Èɽ¸½¤µ¤ì¤Æ¤¤¤ë¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¤«¡ª
¤Ä¤Þ¤ê¥¯¥í¡¼¥¸¥ã¡¼¤Ï³°Â¦¤Î´Ø¿ô¤Ç¤Ï¤Ê¤¯¡¢¤½¤ÎÃæ¤Ë¤¢¤ëÆþ¤ì»Ò¤Ë¤Ê¤Ã¤¿´Ø¿ô¤Ç¤¹¡£¡ÖÆþ¤ì»Ò¤Ë¤Ê¤Ã¤¿´Ø¿ô¤òÄêµÁ¤·¤¿´Ä¶¡×¤È¤Ï¡¢³°Â¦¤Î´Ø¿ô¤ÎÊÑ¿ô¤È¤½¤Î͸úÈϰϡʥ¹¥³¡¼¥×¡Ë¤ò°ÕÌ£¤¹¤ë¤ï¤±¤Ç¡¢¾å¤Î 2 ¤Ä¤ÎÎã¤Ç¤Ï¶¦¤Ë¡¢Æþ¤ì»Ò¤Ë¤Ê¤Ã¤¿´Ø¿ô¤¬ÄêµÁ¤µ¤ì¤¿´Ä¶¤È¤Ï¡¢¥°¥í¡¼¥Ð¥ë´Ä¶²¼¤Ë¤¢¤ë´Ø¿ô¤ÎÃæ¤Ë¸ºß¤¹¤ë¥í¡¼¥«¥ë´Ä¶¤Ç¤¹¡£
¤µ¤Æ¡¢Æþ¤ì»Ò¤Ë¤Ê¤Ã¤¿´Ø¿ô¤Ï¤è¤¯»È¤ï¤ì¤Þ¤¹¤·¡¢¤½¤Î´Ø¿ô¤¬³°Â¦¤Î´Ø¿ô´Ä¶¤Ø¤Î»²¾È¤ò¤â¤Ã¤Æ¤¤¤ë¤³¤È¤â·è¤·¤Æ¾¯¤Ê¤¯¤¢¤ê¤Þ¤»¤ó¡£Î㤨¤Ð¡¢¼¡¤Î¤è¤¦¤Ë³°Â¦¤Î´Ø¿ô¤Î°ú¿ô¤äÆâÉô¤ÎÊÑ¿ô¤ò¡¢Æâ¦¤Î´Ø¿ô¤«¤é»²¾È¤¹¤ë¤è¤¦¤Ê¥³¡¼¥É¤ò½ñ¤±¤Ð¡¢Æâ¦¤Î´Ø¿ô¤Ï ¡Ö ÄêµÁ¤µ¤ì¤¿´Ä¶¤Ø¤Î»²¾È¤ò»ý¤Ã¤¿´Ø¿ô ¡× ¤Ë¤Ê¤ê¤Þ¤¹¡£¤Ä¤Þ¤êÆâ¦¤Î´Ø¿ô¤Ï¥¯¥í¡¼¥¸¥ã¡¼¤Ç¤¹¡£
// ´Ø¿ô sample ¤Ï¥°¥í¡¼¥Ð¥ë´Ä¶¤Ë¤¢¤ë¡£ function sample(x){ // ¥°¥í¡¼¥Ð¥ë´Ø¿ô sample ľ²¼¤Ë¡¢´Ä¶ Lc1 ¤¬³ÊǼ¤µ¤ì¤Æ¤¤¤ë¡£ ¡¡¡¡var y = 1; // ´Ä¶ Lc1 ¤Ë¤Ï x¡¢y¡¢z ¤Î 3 ¤Ä¤ÎÊÑ¿ô¤¬¤¢¤ë¡£ ¡¡¡¡// ´Ä¶ Lc2 ¤«¤é´Ä¶ Lc1 ¤ÎÃæ¤Ë¤¢¤ë x ¤È y ¤ò»²¾È¤·¤Æ¤¤¤ë¡£ ¡¡¡¡var z = function(){ return y + x++; /*´Ä¶ Lc2*/}; ¡¡¡¡return z(); }; /* 1 ÅÙÌÜ */ sample(2) // result¡§3 /* 2 ÅÙÌÜ */ sample(2) // result¡§3 /* 3 ÅÙÌÜ */ sample(2) // result¡§3 ¡¦¡¦¡¦¡¦
¤·¤«¤·¡¢¤¤¤¯¤é¥¯¥í¡¼¥¸¥ã¡¼¤¬¤¢¤Ã¤Æ¤â¡¢¤½¤ì¤À¤±¤Ç¤Ï¥°¥í¡¼¥Ð¥ë´Ä¶¤«¤éÆâ¦¤Î´Ø¿ô¤Ï»²¾È½ÐÍè¤Þ¤»¤ó¡£
¾å¤ÎÎã¤Ç¤Ï¡¢³Î¤«¤ËÆâ¦¤Î´Ø¿ô¤«¤é³°Â¦¤Î´Ø¿ô¤Ø¤Î»²¾È¡Ê »²¾È Lc2 ¢ª Lc1 ¡Ë¤Ï¸ºß¤·¤Þ¤¹¤¬¡¢¥°¥í¡¼¥Ð¥ë´Ä¶¤«¤éÆâ¦¤Î´Ø¿ô¤Ø¤Î»²¾È¡Ê »²¾È G ¢ª Lc2 ¡Ë¤¬Â¸ºß¤·¤Þ¤»¤ó¡£ Lc1 ¤Ø¤Î»²¾È¤ò»ý¤Ã¤¿¥¯¥í¡¼¥¸¥ã¡¼¡Ê¤½¤ì¤Ï Lc2 ´Ä¶¤Ë¤¢¤ë¡Ë¤ËÂФ·¤Æ¡¢¥°¥í¡¼¥Ð¥ë´Ä¶ G ¤«¤é¥¢¥¯¥»¥¹½ÐÍè¤Ê¤ì¤Ð¡¢³°Â¦¤Î´Ø¿ô¤¬½ªÎ»¤¹¤ì¤Ð¤½¤ì¤È¶¦¤Ë¥¯¥í¡¼¥¸¥ã¡¼¤â¥¬¡¼¥Ù¡¼¥¸¥³¥ì¥¯¥·¥ç¥ó¤µ¤ì¤Æ¤·¤Þ¤¤¤Þ¤¹¡£
¤³¤ÎÅÀ¤³¤½¤¬¥Ý¥¤¥ó¥È¤Ç¤¹¡£¥°¥í¡¼¥Ð¥ë´Ä¶¤«¤é¥¯¥í¡¼¥¸¥ã¡¼¤ò»²¾È¤¹¤ë²¿¤é¤«¤ÎÁ¼ÃÖ¡ÊÎ㤨¤Ð Lc2 ´Ä¶¤«¤é¤Î return Ãͤò¥°¥í¡¼¥Ð¥ë´Ä¶¤ËÊÖ¤¹¡Ë¤ò»Ü¤·¤Æ¡¢¥°¥í¡¼¥Ð¥ë´Ä¶¤«¤éÆâ¦¤Î´Ø¿ô¤Ë¥¢¥¯¥»¥¹½ÐÍè¤ë¤è¤¦¤Ë¤¹¤ì¤Ð¡¢³°Â¦¤Î´Ø¿ô¼Â¹Ô¤¬½ª¤ï¤Ã¤¿¸å¤Ë¤ª¤¤¤Æ¤â¡¢¥°¥í¡¼¥Ð¥ë´Ä¶¤«¤é¥¯¥í¡¼¥¸¥ã¡¼¤Ø¤Î»²¾È¤òÍøÍѤ·¤Æ¡¢·ë²Ì¤È¤·¤Æ Lc1 ´Ä¶¤Ø¤Î¥¢¥¯¥»¥¹¤¬²Äǽ¤È¤Ê¤ê¤Þ¤¹¡£
Ìϼ°Åª¤Ë½ñ¤±¤Ð¡¢G ¢ª Lc2 ¢ª Lc1 ¡Ê ¢ª ¤Ïº¸Â¦¤Î´Ä¶¤«¤é±¦Â¦¤Î´Ä¶¤Ø¤Î»²¾È¤òɽ¤¹¡Ë ¤È¤Ê¤ë¤È¤¡¢Lc2 ´Ä¶¤Î´Ø¿ô¤¬¥¯¥í¡¼¥¸¥ã¡¼¤Ë¤Ê¤ê¤Þ¤¹¡£
¿¤¯¤Î¥¯¥í¡¼¥¸¥ã¡¼¥µ¥ó¥×¥ë¤Ï¡¢Æâ¦¤Î´Ø¿ô¤«¤é¤Î return Ï¢º¿¤òÍøÍѤ·¤Æ¥°¥í¡¼¥Ð¥ëÊÑ¿ô¤ÈÆâ¦¤Î´Ø¿ô¤ò¥ê¥ó¥¯¤µ¤»¤Æ¤¤¤Þ¤¹¤¬¡¢¥°¥í¡¼¥Ð¥ë´Ä¶¤«¤é¤ÎÆâÉô´Ø¿ô¤Ø¤Î»²¾È¤òÀßÄꤹ¤ë¤³¤È¤¬¡¢¥¯¥í¡¼¥¸¥ã¡¼¤ò¸ú²ÌŪ¤ËÍøÍѤ¹¤ë¡Ö Èëºö ¡×¤È¤Ê¤ê¤Þ¤¹¡£
¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç¸ÀµÚ¤··ÇºÜ¤·¤¿ slideToggleEx ¥×¥é¥°¥¤¥ó¤ÏÉÔ´°Á´¤Ç¤·¤¿¡£´°Á´ÈǤϥ¨¥ó¥È¥ê¥¤ No. 733 ¤ò¤´Í÷¤¯¤À¤µ¤¤¡£
jquery.js ¤Î¼«ºî¥×¥é¥°¥¤¥ó slideToggleEx ¤ò¼ÂºÝ¤Ë³Æ¥¨¥ó¥È¥ê¥¤Æâ¤Ç¿ï»þÍøÍѤ¹¤ë¤¿¤á¤Ë¤Ï¡¢´ÊÊØ¤ÊÍøÍÑÊýË¡¤òºî¤Ã¤Æ¤ª¤¯É¬Íפ¬¤¢¤ê¤Þ¤¹¡£¤³¤¦¤·¤¿¼«¤é¤Î¼ûÍפ˴ð¤Å¤¤¤Æ°Ê²¼¤ÎÊýË¡¤ò¤Þ¤È¤á¤Þ¤·¤¿¡£
n ¤Ïµ¯½ªÅÀ¤ò°ÕÌ£¤·¼¡¤ÎÄ̤ê¤Î°ÕÌ£¤ò»ý¤Á¤Þ¤¹¡£
0¡§¥Ü¥Ã¥¯¥¹¤ÎÃæ¿´¡¢1¡§º¸¾åü¡¢2¡§±¦¾åü¡¢3¡§±¦²¼Ã¼¡¢4¡§º¸²¼Ã¼¡¢
5¡§¾åÊÕ¡¢6¡§±¦ÊÕ¡¢7¡§²¼ÊÕ¡¢8¡§º¸ÊÕ
¤³¤ì¤À¤±ÀßÄꤹ¤ì¤Ð¡¢¥È¥ê¥¬¡¼¤Ç¤¢¤ë button ¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È¡¢n ¤Ç»ØÄꤷ¤¿°ÌÃÖ¤òµ¯½ªÅÀ¤È¤·¤Æ¡¢¥È¥ê¥¬¡¼¥Ü¥¿¥ó¤Îľ¸å¤ËÇÛÃÖ¤µ¤ì¤¿Í×ÁǤ¬ slideToggleEx ŬÍÑÂоÝÍ×ÁǤȤʤꡢ±£Ê䵤줿¤êɽ¼¨¤µ¤ì¤ë¤è¤¦¤Ê¥³¡¼¥É¡Ê ¥¨¥ó¥È¥ê¥¤ËöÈø¤Ë·ÇºÜ ¡Ë¤ò½ñ¤¤Þ¤·¤¿¡£
¡Ö ¤³¤ì¤À¤± ¡×¤È¸À¤Ã¤Æ¤â·ë¹½¤¿¤¯¤µ¤ó¤¢¤ë¤¿¤á¡¢ºÇ½é¤ÏÌÌÅݤ˴¶¤¸¤Þ¤¹¤¬¡¢Ä¾¤°¤Ë´·¤ì¤Þ¤¹¤·¡¢¼ÂºÝ¤Ë»È¤Ã¤Æ¤ß¤ë¤È·è¤·¤ÆÂçÊѤʼê´Ö¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¡£
¾å¤Î 5 ¤Ä¤À¤±¤Ç¡¢slideToggleEx ¥×¥é¥°¥¤¥ó¤¬´Êñ¤Ë»È¤¨¤ë¤è¤¦¤Ë¤¹¤ë¤¿¤á¤Ë¡¢¤â¤¦£±¤Ä³ºÅöÉôʬ¤Î HTML ʸ¤òÆÃÊ̤ʹ½Â¤¤Ë¤¹¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£¤³¤ì¤¬ 6 ¤ÄÌܤˤ·¤ÆºÇ¸å¤ÎÍ×·ï¤È¤Ê¤ê¤Þ¤¹¡£¤½¤ÎÍ×·ï¤È¤Ïµ¯Æ°¥Ü¥¿¥ó¤Îľ¤°¸å¤Ë slideToggleEx ÂоÝÍ×ÁǤ¬¤¢¤ë¤È¤¤¤¦¤³¤È¤Ç¤¹¡£
¤½¤¦¤Ç¤Ê¤¤¾ì¹ç¤Ë¤Ï ¸Ä¡¹¤Ë slideToggleEx ¥á¥½¥Ã¥É¤ò¸Æ¤Ó½Ð¤¹¥³¡¼¥É¤ò½ñ¤¯¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
³ºÅöÉôʬ¤Î HTML ¤ò°Ê²¼¤Î¤¤¤º¤ì¤«¤Ë¤¹¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£¡Ê¤¤¤º¤ì¤Î¥±¡¼¥¹¤â¥Ü¥Ã¥¯¥¹¤Îº¸¾å¤òµ¯½ªÅÀ¤È¤¹¤ë¾ì¹ç¤ÇÎ㼨¤·¤Þ¤¹¡£¡Ë
¢£¥±¡¼¥¹ 1 <div><button class="fireSlideToggleEx-1">µ¯Æ°¥Ü¥¿¥ó</button></div> <div>¡¦¡¦¡¦slideToggleExÂоÝÍ×ÁÇ¡¦¡¦¡¦</div> ¢£¥±¡¼¥¹ 2 <button class="fireSlideToggleEx-1" style="display:block;width:120px;">µ¯Æ°¥Ü¥¿¥ó</button> <div>¡¦¡¦¡¦slideToggleExÂоÝÍ×ÁÇ¡¦¡¦¡¦</div> ¢¨ 2 ¹ÔÌܤΠdiv Í×ÁǤÏÊÌ¤Ë div ¤Ç¤Ê¤¯¤Æ¤â¥Ö¥í¥Ã¥¯Í×ÁǤʤé¤Ð²¿¤Ç¤â¹½¤¤¤Þ¤»¤ó¡£
¥±¡¼¥¹ 1 ¤Ï°ìÈÌŪ¤Ê button ¥¿¥°¤Î»È¤¤Êý¤Î¾ì¹ç¤Ç¤¹¡£¤Ä¤Þ¤ê button ¥¿¥°¤ò inline Í×ÁǤȤ·¤ÆÇÛÃÖ¤¹¤ë¾ì¹ç¤Î HTML ʸ¤Ç¤¹¡£¤³¤Î¾ì¹ç¤Ë¤Ï button ¥¿¥°¤Î¿ÆÍ×ÁǤΠnext sibling ¥Ö¥í¥Ã¥¯Í×ÁǤ¬ slideToggleEx ¥á¥½¥Ã¥É¤ÎŬÍÑÂоݤȤʤë¤è¤¦¤Ë¥³¡¼¥É¤òºî¤ê¤Þ¤·¤¿¡£
°ìÊý¥±¡¼¥¹ 2 ¤Ï button ¥¿¥°¤ò¥Ö¥í¥Ã¥¯Í×ÁǤȤ·¤ÆÇÛÃÖ¤¹¤ë¾ì¹ç¤Ç¤¹¡£¤³¤Î¾ì¹ç¤Ë¤ÏÅö³º¤Î¥Ü¥¿¥ó¥¿¥°¤Î next sibling ¥Ö¥í¥Ã¥¯Í×ÁǤ¬ slideToggleEx ¥á¥½¥Ã¥É¤ÎŬÍÑÂоݤȤʤë¤è¤¦¤Ë¥³¡¼¥É¤òºî¤ê¤Þ¤·¤¿¡£
¤³¤Î¤è¤¦¤ÊÅöÁ³¤È»×¤ï¤ì¤ëHTMLʸ¹½À®¤Ë¤·¤Æ¤ª¤±¤Ð¡¢±¿ÍѤËÅö¤¿¤Ã¤Æ¤É¤Î¤è¤¦¤Ë¤·¤¿¤«¤ò»×¤¤½Ð¤¹¤Î¤âÍÆ°×¤Ç¤¹¤·¡¢²¾¤Ë¹½Â¤¤ò˺¤ì¤Æ¤âľ´¶Åª¤Ë»×¤¤½Ð¤¹¤³¤È¤¬²Äǽ¤È¤Ê¤ê¤Þ¤¹¡£
¥×¥é¥°¥¤¥ó¤Ï position ̵»ØÄêÈǤȻØÄêÈǤΠ2 ¼ïÎà¤òºî¤ê¤Þ¤·¤¿¡£¤É¤Á¤é¤âÁ´¤¯Æ±ÍÍ¤ÎÆ°¤¤ò¤·¤Þ¤¹¤¬¡¢¸å¼Ô¤ÎÊý¤¬¥³¡¼¥ÉÁ´ÂΤΥХé¥ó¥¹¤¬¤è¤¤¤«¤â¤·¤ì¤Þ¤»¤ó¡£
Åö½é position »ØÄêÈǤòºîÀ®¤·¡¢¥¢¥Ë¥áŬÍÑÂÐ¾Ý¤Ë position:relative ¤ò¤½¤ÎÅÔÅÙ»ØÄꤷ¤Æ¤¤¤Þ¤·¤¿¡£top ¤È left ¤ò¥¢¥Ë¥áÂоݤȤ¹¤ë¤Î¤Ç¡¢¥¢¥Ë¥áÂоÝÍ×ÁÇ¤Ë¤Ï static °Ê³°¤Î position »ØÄ꤬°Ù¤µ¤ì¤Æ¤¤¤Ê¤±¤ì¤Ð¤Ê¤é¤Ê¤¤¤¿¤á¤Ç¤¹¡£¤·¤«¤·¡¢slideToggleEx ¥×¥é¥°¥¤¥ó¤Î±¿ÍѤò½Å¤Í¤ë¤ËÏ¢¤ì¡¢¤½¤ÎÅÔÅÙ»ØÄꤹ¤ë¤³¤È¤¬Èó¾ï¤ËÌÌÅݤǤ¢¤ë¤³¤È¤Ëµ¤¤¬¤Ä¤¤Þ¤·¤¿¡£
¤½¤³¤Ç²þ¤á¤Æ position ̵»ØÄêÈǤòºîÀ®¤·¤¿¤Î¤Ç¤¹¤¬¡¢¤½¤ì¤¬´°À®¤·¤Æ¤«¤é¡¢¤Õ¤È position »ØÄê¤ò¥³¡¼¥É¤Ç¹Ô¤¨¤Ð¤è¤¤¤³¤È¤Ëµ¤¤¬¤Ä¤¤Þ¤·¤¿¡£¤½¤·¤Æ¡¢²¾¤Ë¥¢¥Ë¥áÂÐ¾Ý¤Ë position »ØÄ꤬¤µ¤ì¤Æ¤¤¤Ê¤¤¾ì¹ç¤Ç¤â¡¢ÁêÂлØÄê¤È¤Ê¤ë¤è¤¦¡¢Javascript ¥³¡¼¥É¤Ë¤è¤Ã¤Æ¶¯À©Åª¤Ë»ØÄꤹ¤ë¤³¤È¤Ë¤·¤Þ¤·¤¿¡£
·ë²Ì¤È¤·¤Æ¡¢²ó¤êÆ»¤ò¤·¤Æ¤·¤Þ¤Ã¤¿¤Î¤Ç¤¹¤¬¡¢¤³¤Î¤è¤¦¤Ê¥±¥¢¥ì¥¹¥ß¥¹¤òÈȤ¹¤³¤È¼«ÂΤ¬¡¢¤Þ¤À¤Þ¤À¥³¡¼¥É³«È¯¤ËÉÔ´·¤ì¤Ç¤¢¤ë¾ÚÌÀ¤«¤â¤·¤ì¤Þ¤»¤ó¡£
¤³¤¦¤·¤Æ¡¢º£¼ÂºÝ¤Ë»È¤Ã¤Æ¤¤¤ë slideToggleEx ¥×¥é¥°¥¤¥ó¥á¥½¥Ã¥É¤ÏºÇ½é¤Ëºî¤Ã¤¿ÈǤò²þÄû¤·¤¿ position »ØÄêÈǤȤʤê¤Þ¤·¤¿¡£
¤Ê¤ª¡¢¥¢¥Ë¥á·Ñ³»þ´Ö¤È easing ´Ø¿ô¤Ï¡¢½é´üÃͤòÀßÄꤹ¤ë slideToggleEx.opts ¥ª¥Ö¥¸¥§¥¯¥È¤Ë¤ª¤¤¤Æ¡¢1 ÉäËÀßÄꤷ¡¢easing ¤Ï̵»ØÄê¤È¤·¤Æ¤¤¤Þ¤¹¡£opts ¥ª¥Ö¥¸¥§¥¯¥È¤òÊѤ¨¤ì¤Ð¡¢¼«ºß¤Ë·Ñ³»þ´Ö¤È easing ´Ø¿ô¤òÊѹ¹¤Ç¤¤Þ¤¹¤¬¡¢»È¤¦ºÝ¤Ë¤½¤ÎÅÔÅÙ duration ¤È easing ´Ø¿ô¤òÊѹ¹¤¹¤ëɬÍפϤʤ¤¤È¹Í¤¨¡¢(1) »ØÄꤹ¤ë¥Ü¥¿¥ó¥¿¥°¤È (2) »ØÄꤵ¤ì¤ë¥Ö¥í¥Ã¥¯¥¿¥°µÚ¤Ó (3) slideToggleEx-n ¥¯¥é¥¹Ì¾¤ò»ØÄꤹ¤ë¤À¤±¤Ç»È¤¨¤ì¤Ð¤è¤¤¤ÈȽÃǤ·¤Þ¤·¤¿¡£
°Ê²¼¤Î¥³¡¼¥É¥ê¥¹¥È¤Îɽ¼¨/±£ÊäˤÏÅöÁ³¤Ê¤¬¤é¡¢slideToggleEx ¤òŬÍѤ·¤Æ¤¤¤Þ¤¹¡£
¢§ver not use "position:relative/absolute" /* jQuery plugin : slideToggleEx() Release at 2009.8.21, ver2 at 2009.9.8*/ (function($){ var ver="absolute animation, non position assignment"; $.fn.slideToggleEx = function( type, duration, easing, fn ){ ¡¡$target=this; ¡¡var o = $.extend({},$.fn.slideToggleEx.opts); ¡¡// ½é¤á¤Æ¤½¤Î¥¤¥ó¥¹¥¿¥ó¥¹¤«¤é¸Æ¤Ð¤ì¤¿¤«¡¢¥¤¥ó¥¹¥¿¥ó¥¹¤¬ÊѤï¤Ã¤¿¾ì¹ç¤Î¤ß ¡¡if(!o.target || o.target[0]!==$target[0]) { ¡¡¡¡$.extend(o,{ ¡¡¡¡¡¡orig : o, // ÅöÌ̻Ȥï¤Ê¤¤¤¬Ç°¤Î¤¿¤á¤Ë $.fn.slideToggleEx.opts ¤ò¥Ð¥Ã¥¯¥¢¥Ã¥× ¡¡¡¡¡¡target : $target, // jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Ø¤Î»²¾È¤òÅÐÏ¿¤¹¤ë¡£ ¡¡¡¡¡¡// ¥Ü¥Ã¥¯¥¹¤ò show ¤¹¤ë»þ¤Ë½é´ü¤Î¥Þ¡¼¥¸¥óÃͤò»ÈÍѤ¹¤ë¤Î¤ÇµÏ¿¤·¤Æ¤ª¤¯¡£ ¡¡¡¡¡¡initMTL:{marginTop:$target.css("margin-top"),marginLeft:$target.css("margin-left")}, ¡¡¡¡¡¡/* ¥Ü¥Ã¥¯¥¹¤Î¥Þ¡¼¥¸¥óÊդޤǤγ°ÏÈ¥µ¥¤¥º¤ò¥²¥Ã¥È¤¹¤ë¡£ ¡¡¡¡¡¡ * ⤷¡¢jquery.js ¤Î °µ½Ì¥Õ¥¡¥¤¥ë¤Ç¤Ï outerWidth(true) ¤Î¤è¤¦¤Ë°ú¿ô¤ò»ØÄꤷ¤Æ¤â ¡¡¡¡¡¡ * margin ÊդޤǤγ°À£¤ò¼èÆÀ¤·¤Ê¤¤¡£¤½¤³¤Ç¤ä¤à¤Ê¤¯°ú¿ô¤òÉÕ¤±¤º¤Ë border ÊդޤǤÎÃͤò ¡¡¡¡¡¡ * ¼èÆÀ¤·¤Æ¤«¤é¡¢¤½¤ì¤Ë margin Ãͤò²Ã»»¤·¤Æ margin ÊդޤǤγ°À£¤ò¼èÆÀ¤¹¤ë¡£*/ ¡¡¡¡¡¡oH : $target.outerHeight() + parseInt($target.css("margin-top")) ¡¡¡¡¡¡¡¡+ parseInt($target.css("margin-bottom")), ¡¡¡¡¡¡oW : $target.outerWidth() + parseInt($target.css("margin-left")) ¡¡¡¡¡¡¡¡+ parseInt($target.css("margin-right")), ¡¡¡¡¡¡// ¥×¥é¥°¥¤¥óµ¯Æ°²ó¿ô¤¬´ñ¿ô¤«¶ö¿ô¤«¤òµÏ¿¤¹¤ë¥×¥í¥Ñ¥Æ¥£ ¡¡¡¡¡¡odd : false ¡¡¡¡}); ¡¡¡¡ ¡¡¡¡/* ¥á¥â¥ê¾å¤Î opts ¥ª¥Ö¥¸¥§¥¯¥È¤Ë¤³¤Î¾å¤ÇºîÀ®¤·¤¿¤Ð¤«¤ê¤Î o ¥ª¥Ö¥¸¥§¥¯¥È¤òÅý¹ç ¡¡¡¡ * ¤·¤Æ¡¢½é´üÃͤȤ·¤ÆÊݸ¤¹¤ë¡£Æ±¤¸¥¤¥ó¥¹¥¿¥ó¥¹¤ËÂФ¹¤ë 2 ÅÙÌܰʹߤΥץ饰¥¤¥ó ¡¡¡¡ * µ¯Æ°»þ¤Ë¤Ï o ¥ª¥Ö¥¸¥§¥¯¥È¤Ë opts ¥ª¥Ö¥¸¥§¥¯¥È¤¬Å¾¼Ì¤µ¤ì¡¢¤«¤Ä¤³¤Î if ¾ò·ï¤Ï ¡¡¡¡ * false¤È¤Ê¤ë¤Î¤Ç if ¥Ö¥í¥Ã¥¯¤ÏÍú¹Ô¤µ¤ì¤Ê¤¤¡£¤³¤¦¤·¤Æ¸úΨŪ¤Ê¥³¡¼¥É¿Ê¹Ô¤È¤Ê¤ë¡£ ¡¡¡¡ * ¤Þ¤¿¡¢2 ÅÙÌܰʹߤΥץ饰¥¤¥óµ¯Æ°¤¬°Û¤Ê¤ë¥¤¥ó¥¹¥¿¥ó¥¹¤ËÂФ·¤Æ¹Ô¤ï¤ì¤¿¾ì¹ç¤Ë¤Ï ¡¡¡¡ * 2 ÈÖÌܤΠif ¾ò·ï o.target[0]!==$target[0] ¤¬ true ¤È¤Ê¤ë¤Î¤Ç¡¢if ¥Ö¥í¥Ã¥¯¤¬Íú¹Ô¤µ¤ì¤ë¡£ ¡¡¡¡ * ¤³¤¦¤·¤Æ o ¥ª¥Ö¥¸¥§¥¯¥È¤â $.fn.slideToggleEx.opts ¥ª¥Ö¥¸¥§¥¯¥È¤â¿·¤·¤¤ ¡¡¡¡ * ¥¤¥ó¥¹¥¿¥ó¥¹¤Î½ô°ÀÃͤò³ÊǼ¤¹¤ë¡£*/ ¡¡¡¡$.fn.slideToggleEx.opts = $.extend($.fn.slideToggleEx.opts,o); ¡¡} ¡¡ ¡¡/* ´ñ¿ô²óÌܤ«¶ö¿ô²óÌܤ«¡¢µ¯Æ°²ó¿ô¤òµÏ¿¤¹¤ë¡£¤³¤³¤Ç¤Ï $.fn.slideToggleEx.opts ¡¡ * ¥ª¥Ö¥¸¥§¥¯¥È¤òÍøÍѤ·¤Æ slideToggleEx ¥á¥½¥Ã¥É¤Î¼Â¹Ô¤¬½ª¤ï¤Ã¤¿¸å¤â ¡¡ * odd Ãͤò»Ä¤·¤Æ¤ª¤¯¤³¤È¤¬¥Ý¥¤¥ó¥È¤Ç¤¢¤ë¡£*/ ¡¡o.odd = $.fn.slideToggleEx.opts.odd = !$.fn.slideToggleEx.opts.odd; ¡¡o.hidden = $target.is(":hidden"); // ¥¢¥Ë¥áÂоݤ¬±£¤ì¤Æ¤¤¤ë¤«¤É¤¦¤« ¡¡o.duration = duration || o.duration; // Âè 2 °ú¿ô¤« opts ¥×¥í¥Ñ¥Æ¥£¤ÎÍøÍÑ ¡¡// Âè 3 °ú¿ô¤« opts ¥×¥í¥Ñ¥Æ¥£¤ÎÍøÍÑ¡£duration ¤¬¥ª¥Ö¥¸¥§¥¯¥È¤Î»þ¤Ë¤Ï¶õ¡£ ¡¡o.easing = typeof duration !=="object" ? (easing || o.easing) : ""; ¡¡// Âè 4 °ú¿ô¤« opts ¥×¥í¥Ñ¥Æ¥£¤ÎÍøÍÑ¡£duration ¤¬¥ª¥Ö¥¸¥§¥¯¥È¤Î»þ¤Ë¤Ï¶õ¡£ ¡¡o.complete = typeof duration !=="object" ? ($.isFunction(fn) && fn || o.complete) : ""; ¡¡// ¥¢¥Ë¥áÍѤΠCSS ¥ª¥Ö¥¸¥§¥¯¥È¤òºîÀ®¤¹¤ë´Ø¿ô ¡¡function makeAnimCSS(type,showhide){ ¡¡¡¡type = new Number(type); ¡¡¡¡if (showhide === false) { // ±£Êäµ¤ì¤Æ¤¤¤ë»þ¤Î¥¢¥Ë¥áÍÑ CSS ºîÀ® ¡¡¡¡¡¡return type==0 ? {marginTop:o.oH/2+"px", marginLeft:o.oW/2+"px"}:// center ¡¡¡¡¡¡type==1 ? {marginTop:0,marginLeft:0}: // º¸¾åü ¡¡¡¡¡¡type==2 ? {marginTop:0,marginLeft:o.oW + "px"}: // ±¦¾åü ¡¡¡¡¡¡type==3 ? {marginTop:o.oH+"px", marginLeft:o.oW+"px"}:// ±¦²¼Ã¼ ¡¡¡¡¡¡type==4 ? {marginTop:o.oH+"px", marginLeft:0}: // º¸²¼Ã¼ ¡¡¡¡¡¡type==5 ? {marginTop:0}: // ¾åÊÕ ¡¡¡¡¡¡type==6 ? {marginLeft:o.oW+"px"}:// ±¦ÊÕ ¡¡¡¡¡¡type==7 ? {marginTop: o.oH+"px"}:// ²¼ÊÕ ¡¡¡¡¡¡{marginLeft:0}; // º¸ÊÕ ¡¡¡¡// ɽ¼¨¤µ¤ì¤Æ¤¤¤ë»þ¤Î¥¢¥Ë¥áÍÑ CSS ºîÀ® ¡¡¡¡// type Ãͤ¬ 5 ¤È 7 ¤Î»þ¤Ë¤Ï¥È¥Ã¥×ÃͤΤߡ¢6 ¤È 8 ¤Î»þ¤Ë¤Ï¥ì¥Õ¥ÈÃÍ¤Î¤ß ¡¡¡¡// 0 ¡Á 4 ¤Î»þ¤Ë¤Ï¥È¥Ã¥×Ãͤȥì¥Õ¥ÈÃͤò»ÈÍѤ¹¤ë¡£ ¡¡¡¡} else return (type==5 || type==7) ? {marginTop:o.initMTL.marginTop} ¡¡¡¡¡¡: (type==6 || type==8) ? {marginLeft:o.initMTL.marginLeft} : o.initMTL; ¡¡} ¡¡if (type > 8) // ¥¨¥é¡¼½èÍý ¡¡¡¡(function(){ ¡¡¡¡¡¡alert("Âè 1 °ú¿ô¤Ï 0¡Á8 ¤À¤±¤¬»ØÄê¤Ç¤¤Þ¤¹¡£\n¤ä¤êľ¤·¤Æ¤¯¤À¤µ¤¤¡£\n"+ ¡¡¡¡¡¡"slideToggleEx( 0¡Á8, ·Ñ³»þ´Ö, easing´Ø¿ô, ¥¢¥Ë¥á¸å¼Â¹Ô´Ø¿ô)"); return; ¡¡¡¡})(); ¡¡else { // type Ãͤ¬ 0 ¡Á 8 ¤Î»þ ¡¡¡¡// ¥¢¥Ë¥áÍÑ CSS ¤ÎºÇ½ªºîÀ®¡Ê margin °Ê³°¤Î¥×¥í¥Ñ¥Æ¥£Ãͤ«¤é¤Ê¤ë¥ª¥Ö¥¸¥§¥¯¥È¤Ë¡¢ ¡¡¡¡// makeAnimCSS ´Ø¿ô¤Çºî¤Ã¤¿¥ª¥Ö¥¸¥§¥¯¥È¤òÊ»¹ç¤¹¤ë¡Ë ¡¡¡¡var obj =$.extend( {}, // margin °Ê³°¤Î¥×¥í¥Ñ¥Æ¥£·² ¡¡¡¡ ¡¡( type==5 || type==7 ) ? {} : o.animWidth, ¡¡ ¡¡¡¡( type==6 || type==8 ) ? {} : o.animHeight, ¡¡¡¡ ¡¡{opacity:"toggle"} ); ¡¡¡¡/* ¶ö¿ô²óÌܤε¯Æ°¤«¡¢¥¢¥Ë¥áÂоݤ¬±£Êûþ¤Îµ¯Æ°¤Î»þ¤Ë¤Ï¡¢makeAnimCSS ¤Î ¡¡¡¡ * Âè 2 °ú¿ô¤ò true ¤Ë¡¢´ñ¿ô²óÌܤε¯Æ°¤«¡¢¥¢¥Ë¥áÂоݤ¬É½¼¨¤µ¤ì¤Æ¤¤¤ë»þ¤Ë¤Ï¡¢ ¡¡¡¡ * makeAnimCSS ¤ÎÂè 2 °ú¿ô¤ò false ¤Ë¤¹¤ë¡£ ¡¡¡¡ * ¤³¤ì¤Ë¤è¤ê¥¢¥Ë¥áÍÑ CSS ÃͤòÆóÄ̤ê¤Î¾ì¹ç¤ËÂбþ¤µ¤»¤ÆºîÀ®¤¹¤ë¡£*/ ¡¡¡¡$.extend(obj,(!o.odd || o.hidden) ¡¡¡¡¡¡? makeAnimCSS(type,true) : makeAnimCSS(type,false)); ¡¡¡¡return this.animate(obj, o.duration, o.easing,o.complete); // ¥¢¥Ë¥á¡¼¥·¥ç¥óµ¯Æ° ¡¡} } // End of $.fn.slideToggleEx function /* ¥Ç¥Õ¥©¥ë¥ÈÃͤò slideToggleEx ¥á¥½¥Ã¥É¤Î opts ¥×¥í¥Ñ¥Æ¥£¤ËÀßÄꤷ¤Æ¤ª¤¯¡£ * ¤³¤Î¥ª¥Ö¥¸¥§¥¯¥È¤Ï slideToggleEx ¥á¥½¥Ã¥É¤Î¼Â¹Ô¤¬½ª¤ï¤Ã¤¿¸å¤Î¾ðÊóµÏ¿ÁõÃÖ * ¤È¤·¤Æ¤âµ¡Ç½¤¹¤ë¡£*/ $.fn.slideToggleEx.opts = { ¡¡duration:1000, easing:null, complete:function(){}, ¡¡animHeight : { // ¹â¤µ¤Ë·¸¤ë¥¢¥Ë¥á CSS ¤Î´ûÄêÃÍ ¡¡¡¡height:"toggle",marginTop:"toggle",marginBottom:"toggle",paddigTop:"toggle", ¡¡¡¡paddingBottom:"toggle",borderTopWidth:"toggle",borderBottomWidth:"toggle" ¡¡}, animWidth : { // Éý¤Ë·¸¤ë¥¢¥Ë¥á CSS ¤Î´ûÄêÃÍ ¡¡¡¡width:"toggle",marginLeft:"toggle",marginRight:"toggle",paddigLeft:"toggle", ¡¡¡¡paddingRight:"toggle",borderLeftWidth:"toggle",borderRightWidth:"toggle" ¡¡} }; })(jQuery);
¢§ver use "position:relative" // jQuery plugin : slideToggleEx() Release at 2009.8.21, verup 2009.9.9 (function($){ var ver="not absolute but relative animation on position relative"; // top ¤È left ¥×¥í¥Ñ¥Æ¥£¤Ë¤è¤Ã¤Æµ¯½ªÅÀ¤òÁà¤ë position relative ¥Ð¡¼¥¸¥ç¥ó $.fn.slideToggleEx = function( type, duration, easing, fn ){ ¡¡var $target = this; ¡¡var o = $.extend({},$.fn.slideToggleEx.opts); ¡¡// ½é¤á¤Æ¤½¤Î¥¤¥ó¥¹¥¿¥ó¥¹¤«¤é¸Æ¤Ð¤ì¤¿¤«¡¢¥¤¥ó¥¹¥¿¥ó¥¹¤¬ÊѤï¤Ã¤¿¾ì¹ç¤Î¤ß ¡¡if(!o.target || o.target[0]!==$target[0]) { ¡¡¡¡$.extend(o,{ ¡¡¡¡¡¡orig : o, ¡¡¡¡¡¡target : $target, ¡¡¡¡¡¡oH : $target.outerHeight() + parseInt($target.css("margin-top")) ¡¡¡¡¡¡¡¡+ parseInt($target.css("margin-bottom")), ¡¡¡¡¡¡oW : $target.outerWidth() + parseInt($target.css("margin-left")) ¡¡¡¡¡¡¡¡+ parseInt($target.css("margin-right")), ¡¡¡¡¡¡odd : false ¡¡¡¡}); ¡¡¡¡$.extend($.fn.slideToggleEx.opts,o); ¡¡¡¡if ($target.css("position") ==="static") ¡¡¡¡¡¡$target.css({position:"relative",top:"0",left:"0"}); ¡¡} ¡¡o.odd = $.fn.slideToggleEx.opts.odd = !$.fn.slideToggleEx.opts.odd; ¡¡o.hidden = $target.is(":hidden"); ¡¡o.duration = duration || o.duration; ¡¡o.easing = typeof duration !=="object" ? (easing || o.easing) : ""; ¡¡o.complete = typeof duration !=="object" ? ($.isFunction(fn) && fn || o.complete) : ""; ¡¡function makeAnimCSS(type,showhide){ // ¥¢¥Ë¥áCSS¥×¥í¥Ñ¥Æ¥£¤òºîÀ®¤¹¤ë´Ø¿ô ¡¡¡¡var type = new Number(type); ¡¡¡¡var plmn = showhide ? "-=" : "+="; // showhide == true ¢ª "-=" ¡¡¡¡return type==0 ? {top: plmn + o.oH/2 +"px", left: plmn + o.oW/2 +"px"} : // center ¡¡¡¡type==1 ? {top: plmn + 0, left: plmn + 0} : // º¸¾åü ¡¡¡¡type==2 ? {top: plmn + 0, left: plmn + o.oW +"px"} : // ±¦¾åü ¡¡¡¡type==3 ? {top: plmn + o.oH +"px", left: plmn + o.oW +"px"} : // ±¦²¼Ã¼ ¡¡¡¡type==4 ? {top: plmn + o.oH +"px", left: plmn + 0} : // º¸²¼Ã¼ ¡¡¡¡type==5 ? {top: plmn + 0, left: plmn + 0} : // ¾åÊÕ ¡¡¡¡type==6 ? {top: plmn + 0, left: plmn + o.oW +"px"} :// ±¦ÊÕ ¡¡¡¡type==7 ? {top: plmn + o.oH +"px", left: plmn + 0} :// ²¼ÊÕ ¡¡¡¡type==8 ? {top: plmn + 0, left:plmn + 0} : {top:plmn + 0, left:plmn + 0} ;// º¸ÊÕ ¡¡} ¡¡if (new Number(type) > 8) // ¥¨¥é¡¼ÂÐ½è ¡¡¡¡(function(){ ¡¡¡¡¡¡alert("Âè 1 °ú¿ô¤Ï 0¡Á8 ¤À¤±¤¬»ØÄê¤Ç¤¤Þ¤¹¡£\n¤ä¤êľ¤·¤Æ¤¯¤À¤µ¤¤¡£\n"+ ¡¡¡¡¡¡"slideToggleEx( 0¡Á8, ·Ñ³»þ´Ö, easing´Ø¿ô )"); return; ¡¡¡¡})(); ¡¡else { ¡¡¡¡var obj = (!o.odd || o.hidden) ¡¡¡¡¡¡? makeAnimCSS(type,true) // ¶ö¿ô²óÌܤε¯Æ°¤«¡¢¤Þ¤¿¤ÏÍ×ÁǤ¬±£Êäµ¤ì¤Æ¤¤¤ë»þ¤Î CSS ºîÀ® ¡¡¡¡¡¡: makeAnimCSS(type,false); // ´ñ¿ô²óÌܤε¯Æ°¤«¡¢Í×ÁǤ¬É½¼¨¤µ¤ì¤Æ¤¤¤ë»þ¤Î CSS ºîÀ® ¡¡¡¡$.extend( obj, // top ¤È left ¤À¤±¤ÎCSS¥ª¥Ö¥¸¥§¥¯¥È¤ËÉý¤È¹â¤µ´Ø·¸ÃͤâÄɲà ¡¡¡¡ ¡¡( type==5 || type==7 ) ? {} : o.animWidth, // ¾åÊÕ¤«²¼Êդλþ¤Ë¤ÏÉýÊý¸þCSS¤ÏÂоݳ° ¡¡ ¡¡¡¡( type==6 || type==8 ) ? {} : o.animHeight, // ±¦ÊÕ¤«º¸Êդλþ¤Ë¤Ï¹â¤µÊý¸þCSS¤ÏÂоݳ° ¡¡¡¡ ¡¡{opacity:"toggle"} ); // Æ©ÌÀÅ٤⥢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤È¤¹¤ë ¡¡¡¡return this.animate(obj, o.duration, o.easing, o.complete); // ¥¢¥Ë¥áµ¯Æ° ¡¡} }; // End of $.fn.slideToggleEx // ½é´üÃÍÀßÄê¤È¥×¥í¥Ñ¥Æ¥£µ²±ÁõÃ֤Ȥ·¤Æ¤Îµ¡Ç½¤Î¤¿¤á¤Ë // ¢¨ ¤³¤ì¤Ï position ̵»ØÄêÈǤȻØÄêÈǤ˶¦Ä̤¹¤ëƱ°ì¤Î¤â¤Î¤Ç¤¹¡£ $.fn.slideToggleEx.opts = { ¡¡duration:1000, easing:null, complete:function(){}, ¡¡animHeight : { ¡¡¡¡height:"toggle",marginTop:"toggle",marginBottom:"toggle",paddigTop:"toggle", ¡¡¡¡paddingBottom:"toggle",borderTopWidth:"toggle",borderBottomWidth:"toggle" ¡¡}, animWidth : { ¡¡¡¡width:"toggle",marginLeft:"toggle",marginRight:"toggle",paddigLeft:"toggle", ¡¡¡¡paddingRight:"toggle",borderLeftWidth:"toggle",borderRightWidth:"toggle" ¡¡} }; })(jQuery);
¢§¤³¤Î¥³¡¼¥É¤Ï¡¢¥á¥½¥Ã¥É¥×¥é¥°¥¤¥ó¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¤¬¡¢¥×¥é¥°¥¤¥ó¤È¥»¥Ã¥È¤Ç include ¡¡¥Õ¥¡¥¤¥ë¤ËÅÐÏ¿¤·¤Æ¤ª¤¯¤È½ÅÊõ¤·¤Þ¤¹¡£¤³¤ì¤¬¤Ê¤¤¤È fireSlideToggleEx-n ¤Î¥¯¥é¥¹»ØÄê¤ò ¡¡¤·¤Æ¤â next sibling Í×ÁǤʤɤò slideToggleEx ¤ÎŬÍÑÂоݤȤ¹¤ë¤³¤È¤Ï½ÐÍè¤Þ¤»¤ó¡£ /* regist click Event to fire slideToggleEx() for nextBlock * ¥¯¥ê¥Ã¥¯¥¤¥Ù¥ó¥Èµ¯Æ°¥Ü¥¿¥ó¤È slideToggleEx ŬÍÑÂоݤòÅÐÏ¿¤¹¤ë¡£ * ¤³¤ì¤â position ̵»ØÄêÈÇŽ¤»ØÄêÈǤ˶¦Ä̤¹¤ë¥³¡¼¥É¤Ç¤¹¡£*/ 1:$(function(){ // ÅöÁ³ DOM ¤¬ Ready ¤µ¤ì¤Æ¤«¤éµ¯Æ°¤¹¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£ 2:¡¡var duration = 1000, easing = null,fn = function(){}, clk = {}; 3:¡¡function func(i){ 4:¡¡¡¡$.each(clk[i],function(){ ¡¡¡¡¡¡// target ¥ª¥Ö¥¸¥§¥¯¥È¤Ï slideToggleEx Âоݤθġ¹¤Î¥Î¡¼¥É 1 ¤Ä¤À¤±¤ò³ÊǼ¤¹¤ë¡£ 5;¡¡¡¡¡¡var $target={}; ¡¡¡¡¡¡ ¡¡// $target ¥ª¥Ö¥¸¥§¥¯¥È¤Î j ¥×¥í¥Ñ¥Æ¥£¤Ë slideToggleEx ÂоݥΡ¼¥É¤ò³ÊǼ¤¹¤ë¡£ ¡¡¡¡¡¡ ¡¡// fireSlideToggleEx-x ¥¯¥é¥¹»ØÄꤵ¤ì¤¿¥Ü¥¿¥óÍ×ÁǤ¬¥Ö¥í¥Ã¥¯Í×ÁǤξì¹ç¤Ë¤Ï ¡¡¡¡¡¡ ¡¡// next sibling¤ò block °Ê³°¤Î inline Í×ÁǤξì¹ç¤Ë¤Ï¿ÆÍ×ÁǤΠ¡¡¡¡¡¡ ¡¡// next sibling Í×ÁǤò slideToggleEx ÂоݤȤ¹¤ë¡£ 6:¡¡¡¡¡¡$target[i] = $(this).css("display")=="block" ? $(this).next() : $(this).parent().next(); 7:¡¡¡¡¡¡if ($target[i].length) { 8:¡¡¡¡¡¡¡¡$(this).click(function(){ ¡¡ ¡¡¡¡¡¡¡¡¡¡// IE ¤Ë¤ª¤¤¤Æ¤Ï±¦Â¦¤ò¥¢¥Ë¥áµ¯½ªÅÀ¤Ë¤¹¤ë¤È¸Ç¤Þ¤ë»ö¤¬Â¿¤¤¤Î¤Ç¡¢ ¡¡ ¡¡¡¡¡¡¡¡¡¡// ¶¯À©Åª¤ËƱ¼ï¤Îº¸Â¦µ¯½ªÅÀ¤Ë»ØÄê¤òÂØ¤¨¤ë¡£ 9:¡¡¡¡¡¡¡¡¡¡if (jQuery.browser.msie) 10:¡¡¡¡¡¡¡¡¡¡¡¡var k = i==2 && 1 || i==3 && 4 || i==6 && 8 || i; 11:¡¡¡¡¡¡¡¡¡¡else k=i; ¡¡¡¡¡¡¡¡¡¡ ¡¡// slideToggleEx ¤òµ¯Æ°¤¹¤ë¡£ 12:¡¡¡¡¡¡¡¡¡¡$target[i].slideToggleEx(k, duration, easing, fn); 13:¡¡¡¡¡¡¡¡¡¡$(this).blur(); // ¥Ü¥¿¥óÍ×ÁǤΥե©¡¼¥«¥¹¤ò³°¤¹ 14:¡¡¡¡¡¡¡¡}); 15:¡¡¡¡¡¡} 16:¡¡¡¡}); 17:¡¡} 18:¡¡for (var i=0; i<9; i++){ // 0 ¤«¤é 8 Ëø¤Î½ä²ó½èÍý ¡¡ ¡¡¡¡// ¥¯¥ê¥Ã¥¯¥¤¥Ù¥ó¥È¤òÅÐÏ¿¤¹¤ë¥ª¥Ö¥¸¥§¥¯¥È clk ¤Î i ¥×¥í¥Ñ¥Æ¥£¤òºîÀ®¤·¡¢ ¡¡ ¡¡¡¡// ¤½¤ì¤Ë "fireSlideToggleEx-i"¡Ê i ¤Ï 0¡Á8 ¡Ë class ̾¤Î¥Î¡¼¥É¤ò¤â¤Ä ¡¡ ¡¡¡¡// jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤òÅÐÏ¿¤¹¤ë¡£¤³¤ì¤Ë¤è¤ê¡¢¥Ú¡¼¥¸Æâ¤Ë¤¢¤ë ¡¡¡¡¡¡ // fireSlideToggleEx-n ¥¯¥é¥¹Ì¾¤ò»ý¤Ä¥Î¡¼¥É¤òª¤¨¤ë¡£ 19:¡¡¡¡clk[i] = $(".fireSlideToggleEx-" + i); ¡¡ ¡¡¡¡// i ÈÖ̾¤Î¥Î¡¼¥É¤¬¤Ê¤±¤ì¤Ð loop ¤ÎÀèÆ¬¹Ô¤ËÌá¤Ã¤Æ i++ ¤¹¤ë¡£ 20:¡¡ if (!clk[i].length) continue; ¡¡¡¡ ¡¡// i ÈÖ̾¤Î¥Î¡¼¥É¤¬Â¸ºß¤·¤¿¾ì¹ç¤Ë¤Ï¡¢Åö³º¥¤¥ó¥¹¥¿¥ó¥¹¤Î ¡¡¡¡ ¡¡// ³Æ¥Î¡¼¥ÉËè¤Ë½ä²ó½èÍý¤ò¹Ô¤¦¤¿¤á¤Ë func ´Ø¿ô¤ò¸Æ¤Ó½Ð¤¹¡£ 21:¡¡¡¡func(i); 22:¡¡¡¡clk[i].hover( // ¥Þ¥¦¥¹¥ª¡¼¥Ð¡¼/¥¢¥¦¥È»þ¤Î¥Ü¥¿¥óÇØ·Ê¿§¤ÎÊѹ¹ 23:¡¡¡¡¡¡function(){$(this).css({backgroundColor:"pink"})}, 24:¡¡¡¡¡¡function(){$(this).css({backgroundColor:""})} 25:¡¡¡¡) 26:¡¡¡¡// ¥Þ¥¦¥¹¤¬²¡¤·²¼¤²¤é¤ì¤¿¾ì¹ç¤Î¿§Âؤ¨ 27:¡¡¡¡.mousedown(function(){$(this).css('background-color','palegreen')}) 28:¡¡} 29:});
Èó¾ï¤Ë¶ìÏ«¤·¤¿¤Î¤Ï¡¢slideToggleEx ¥×¥é¥°¥¤¥ó¤ÎºÆµ¯Æ°¤ÎºÝ¤Ë¡¢½¾Á°ÃͤòÊÝ»ý¤µ¤»¤ëÁ¼Ã֤Ǥ·¤¿¡£
̵̾´Ø¿ô¤Î¥È¥Ã¥×¥ì¥Ù¥ë¤Ç¡¢slideToggleEx ¥á¥½¥Ã¥É³°¤ËÊÑ¿ô¤òÍѰդ¹¤ì¤Ð²ò·è¤¹¤ë¤³¤È¤Ê¤Î¤Ç¤¹¤¬¡¢À§¤¬Èó¤Ç¤â¥×¥é¥°¥¤¥ó¤Î¥á¥½¥Ã¥É³°¤ËÊÑ¿ô¤òÃÖ¤«¤Ê¤¤¤Ç¤Þ¤È¤á¤¿¤«¤Ã¤¿¤Î¤Ç¡¢¹´¤Ã¤Æ¥³¡¼¥É¤òºî¤ê¤Þ¤·¤¿¡£
¤½¤Î·ë²Ì¡¢¥á¥½¥Ã¥É³°¤È¤Ê¤ëÅÀ¤Ç¤ÏÊѤï¤é¤Ê¤¤¤Î¤Ç¤¹¤¬¡¢¡ØJavascript Âè 5 ÈÇ¡Ùp.144 ¤ä cycle ¥×¥é¥°¥¤¥ó¤ò»²¹Í¤Ë¤·¤Æ slideToggleEx ¥á¥½¥Ã¥É¤Î¥×¥í¥Ñ¥Æ¥£¤ËÃͤòÊÝ»ý¤µ¤»¤ë¤³¤È¤Ë¤·¤Þ¤·¤¿¡£
¤³¤ÎÅÀ¤Ï¶Ë¤á¤Æ½ÅÍפʥݥ¤¥ó¥È¤Ê¤Î¤Ç¡¢¤¸¤Ã¤¯¤ê¤Èµ½Ò¤¹¤ë¤³¤È¤Ë¤·¤Þ¤¹¡£
¥á¥½¥Ã¥É¼Â¹Ô¤¬½ª¤ï¤ë¤È¤½¤ÎÃæ¤ÇÄêµÁ¤µ¤ì¤¿ÊÑ¿ô¤Ï¾Ã¼º¤·¤Æ¤·¤Þ¤¦¤Î¤Ç¡¢Åö³º¥á¥½¥Ã¥É¤Îµ¯Æ°²ó¿ô¤òµ²±¤µ¤»¤ëÊÑ¿ô¤ÏÅö³º¥á¥½¥Ã¥É³°¤Ë¤Ê¤±¤ì¤Ð¤Ê¤ê¤Þ¤»¤ó¡£¤·¤«¤·³°¤ËÊÑ¿ô¤òÃÖ¤¯¤Î¤ÏÈþ¤·¤¯¤¢¤ê¤Þ¤»¤ó¡£
¤½¤³¤Ç¥á¥½¥Ã¥É¤Î¥×¥í¥Ñ¥Æ¥£¤òµ²±ÁõÃ֤ˤ¹¤ë¤³¤È¤Ë¤·¤Þ¤·¤¿¡£
¤½¤Î¤³¤È¤Ë¤Ä¤¤¤Æ¶ñÂÎŪ¤Ë¥³¡¼¥É¤Ë¿¨¤ì¤Ê¤¬¤é¡¢°Ê²¼¤ÇÀâÌÀ¤·¤¿¤¤¤È»×¤¤¤Þ¤¹¡£
1:¡¡var $target=this;
2:¡¡var o = $.extend({},$.fn.slideToggleEx.opts);
3:¡¡// ½é¤á¤Æ¤½¤Î¥¤¥ó¥¹¥¿¥ó¥¹¤«¤é¸Æ¤Ð¤ì¤¿¤«¡¢¥¤¥ó¥¹¥¿¥ó¥¹¤¬ÊѤï¤Ã¤¿¾ì¹ç¤Î¤ß
4:¡¡if(!o.target || o.target[0]!==$target[0]) {
5:¡¡¡¡$.extend(o,{
6:¡¡¡¡¡¡orig : o,
7:¡¡¡¡¡¡target : $target,
8:¡¡¡¡¡¡oH : $target.outerHeight() + parseInt($target.css("margin-top"))
9:¡¡¡¡¡¡¡¡+ parseInt($target.css("margin-bottom")),
10:¡¡¡¡¡¡oW : $target.outerWidth() + parseInt($target.css("margin-left"))
11:¡¡¡¡¡¡¡¡+ parseInt($target.css("margin-right")),
12:¡¡¡¡¡¡odd : false
13:¡¡¡¡});
14:¡¡¡¡$.fn.slideToggleEx.opts = $.extend($.fn.slideToggleEx.opts,o);
15:¡¡¡¡if ($target.css("position") ==="static")
16:¡¡¡¡¡¡$target.css({position:"relative",top:"0",left:"0"});
17:¡¡}
18:¡¡o.odd = $.fn.slideToggleEx.opts.odd = !$.fn.slideToggleEx.opts.odd;
¾å¤Î 18 ¹Ô¤Î¥³¡¼¥É¤Ï slideToggleEx ¥×¥é¥°¥¤¥ó¡Ê position »ØÄêÈÇ ¡Ë¤ÎºÇ½é¤ÎÉôʬ¤«¤éÃê½Ð¤·¤¿¤â¤Î¤Ç¤¹¡£
¤³¤ì¤Ï¥¤¥ó¥¹¥¿¥ó¥¹¤Ø¤Î»²¾È¤¬É¬Íפʾì¹ç¤Ë¤½¤ÎÅÔÅÙ this ¤ò»È¤¦¤È¡¢¥·¡¼¥ó¤Ë¤è¤Ã¤Æ¤Ï»²¾ÈÀ褬ÊѤï¤Ã¤Æ¤·¤Þ¤¦¤³¤È¤¬¤¢¤ë¤Î¤Ç¡¢²¿¤é¤«¤ÎÊÑ¿ô¤¬É¬ÍפÀ¤«¤é¤Ç¤¹¡£ÊÌ¤Ë self ¤Ç¤âÎɤ¤¤Î¤Ç¤¹¤¬¡¢cycle ¥×¥é¥°¥¤¥ó¤ËÊï¤Ã¤Æ jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Ø¤Î»²¾È¤Ç¤¢¤ë¤³¤È¤¬»ë³ÐŪ¤Ë¤ï¤«¤ë¤è¤¦¤Ë $ ¤ò»È¤¤¡¢¤Þ¤¿ target ¤È¤¹¤ë¤³¤È¤Ë¤è¤ê¥¢¥Ë¥áÂоݤǤ¢¤ë¤³¤È¤ò°Ọ̃Ū¤Ë¤âɽ¼¨¤¹¤ë¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£
¤³¤Î¹Ô¤Ï¶Ë¤á¤Æ½ÅÍפÊÌò³ä¤ò²Ì¤¿¤·¤Þ¤¹¡£¤³¤ì¤Ç o ¥ª¥Ö¥¸¥§¥¯¥È¤Ë½é´üÃͤ¬ÀßÄꤵ¤ì¤ë¤È¶¦¤Ë¡¢Æ±¤¸¥¤¥ó¥¹¥¿¥ó¥¹¤«¤é¤Î 2 ÅÙÌܰʹߤΠslideToggleEx ¤Î¸Æ¤Ó½Ð¤·¤ÎºÝ¤Ë¤Ï¡¢½é²ó¸Æ¤Ó½Ð¤·»þ¤ËÀßÄꤵ¤ì¤¿½ôÃͤ¬¡¢½é²ó¸Æ¤Ó½Ð¤·»þ¤Î 14 ¹Ô¤Î¼Â¹Ô¤Ë¤è¤Ã¤Æ¡¢opts ¥×¥í¥Ñ¥Æ¥£¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë¤Î¤Ç¡¢¾ðÊóËþºÜ¤Î¤½¤Î opts ¤¬ o ¤ËÊ£¼Ì¤µ¤ì¤Þ¤¹¡£
¤³¤Î·ë²Ì¡¢4 ¹ÔÌܤΠif ʸ¤Ë¤ª¤¤¤Æ¡¢o.target ¥×¥í¥Ñ¥Æ¥£¤Ï¸ºß¤¹¤ë¤·¡¢o.target[0] === $target[0] ¤È¤Ê¤ë¤Î¤Ç¡¢4 ¡Á 17 ¹Ô¤¬¥Ñ¥¹¤µ¤ì¤Þ¤¹¡£¤³¤¦¤·¤ÆÆ±¤¸¥¤¥ó¥¹¥¿¥ó¥¹¤ËÂФ·¤Æ¡¢½ôÃÍÀßÄê¤ò·«¤êÊÖ¤µ¤»¤Ê¤¤¸úΨ²½¤ò¼Â¸½¤·¤Þ¤·¤¿¡£
¤Þ¤º¡¢opts ¥ª¥Ö¥¸¥§¥¯¥È¤Î½é´üÃͤò¥Ð¥Ã¥¯¥¢¥Ã¥×¤¹¤ë¤¿¤á¤Ë¡¢¤½¤ì¤¬Å¾¼Ì¤µ¤ì¤¿ o ¥ª¥Ö¥¸¥§¥¯¥È¤ò orig ¥×¥í¥Ñ¥Æ¥£¤ËÊݸ¤·¤Þ¤¹¡Ê#6¡Ë¡£¤³¤Î¥Ð¥Ã¥¯¥¢¥Ã¥×¤ÏÅöÌ̻Ȥ¤¤Þ¤»¤ó¤¬¡¢²¿¤é¤«¤ÎɬÍפ¬¸å¤ÇÀ¸¤¸¤ë¤«¤â¤·¤ì¤Ê¤¤¤È¤ÎÏ·ÇÌ¿´¤Ç¤¹¡£
¼¡¤Ë¡¢target ¥×¥í¥Ñ¥Æ¥£¤Ë $target ¤Ø¤Î»²¾È¤òÅÐÏ¿¤·¤Þ¤¹¡Ê#7¡Ë¡£¤³¤ì¤Ë¤è¤ê¾å¤Ç½Ò¤Ù¤¿¤è¤¦¤Ê ÆóÅÙÌܰʹߤθƤӽФ·»þ¤Î if ʸÉÔÀ®Î©¤òÀ®¤êΩ¤¿¤»¤Þ¤¹¡£
¤³¤¦¤¹¤ë¤³¤È¤Ë¤è¤ê slideToggleEx ÂоÝÍ×ÁǤòºîÀ®¤¹¤ë»þ¤Ë¤Ï°ì¡¹ position »ØÄê¤ò¤·¤Ê¤¯¤Æ¤âÎɤ¤¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£¤Ê¤ª¤³¤Î½èÃÖ¤âÅöÁ³ 1 ²ó¤À¤±¹Ô¤¨¤Ð¤è¤¤¤Î¤Ç¡¢if ʸ¤ÎÃæ¤Ç¹Ô¤¤¤Þ¤¹¡£
12 ¹Ô¤Ç false ¤È¤µ¤ì¤¿ o.odd ÃÍ¤Ï 14 ¹Ô¤Ë¤è¤Ã¤Æ opts.odd = false ¤ÈÊ£¼Ì¤µ¤ì¤Þ¤¹¡£¤½¤·¤Æ 18 ¹Ô¤Ç¤³¤ì¤òÈÝÄꤹ¤ë¤³¤È¤Ë¤è¤ê opt.odd ¤Ï true¤È¤Ê¤ê¡¢¤³¤ì¤¬ o.odd ¤Ë¤âÂåÆþ¤µ¤ì¤Þ¤¹¡£
¤³¤¦¤·¤Æ½é²óµ¯Æ°»þ¤Î o.odd ÃÍ¤Ï true ¤È¤Ê¤ê´ñ¿ô²óÌܤǤ¢¤ë¤³¤È¤¬ÅÐÏ¿¤µ¤ì¤Þ¤¹¡£ÆóÅÙÌܤθƤӽФ·»þ¤Ë¤Ï 2 ¹Ô¤«¤é¤¤¤¤Ê¤ê 18 ¹Ô¤ËÈô¤Ö¤Î¤Ç 18¹Ô¤Î o.odd ¤Ï false¡¢¤Ä¤Þ¤ê¶ö¿ô²óÌܤȤʤê¤Þ¤¹¡£
¤³¤³¤Ë¤ª¤¤¤Æ¡¢¾ï¤Ë opts.odd ¤Ë¶ö¿ô/´ñ¿ô²ó¿ô¤ò¼¨¤¹Ãͤ¬ÊÝ»ý¤µ¤ì³¤±¡¢¤½¤³¤«¤é o.odd Ãͤ¬Ê£¼Ì¤µ¤ì¡¢¸Æ¤Ó½Ð¤·¤ÎÅÔÅÙÊѹ¹¤µ¤ì¤ë¤³¤È¤¬¥Ý¥¤¥ó¥È¤Ç¤¹¡£
¤³¤Î»þ¤Ë¤Ï if ʸ¤Î 2 ÈÖÌܤξò·ï¤¬¸ú²Ì¤òȯ´ø¤·¤Þ¤¹¡£µ¯Æ°¸µ¥¤¥ó¥¹¥¿¥ó¥¹¤¬ÊѤï¤ì¤Ð¡¢2 ¹ÔÌܤˤè¤Ã¤Æ¥²¥Ã¥È¤µ¤ì¤ë o.target ¤Ï¤½¤ì°ÊÁ°¤ÎÊ̤Υ¤¥ó¥¹¥¿¥ó¥¹¤Ø¤Î»²¾È¤òÊÝ»ý¤·¤Æ¤¤¤ë¤¿¤á¡¢É¬¤º o.target[0] ¤Ï $.target[0] ¤È°Û¤Ê¤ê¤Þ¤¹¡£¤³¤¦¤·¤Æ if ʸ¤¬À®Î©¤·¡¢²þ¤á¤Æµ¯Æ°¸µ¥¤¥ó¥¹¥¿¥ó¥¹¤ÎÍ×ÁÇ¥µ¥¤¥º¡Ê o.oH ¤È o.oW ¡Ë¤¬·×¬¤µ¤ì¤Þ¤¹¡£
¤½¤·¤Æ¡¢¤½¤Î·ë²Ì¤Ï 14 ¹Ô¤Ç opts ¥ª¥Ö¥¸¥§¥¯¥È¤ËÊ£¼Ì¤µ¤ì¡¢Åö³º¥¤¥ó¥¹¥¿¥ó¥¹¤«¤é¤ÎÆóÅÙÌܰʹߤθƤӽФ·»þ¤Ë¤Ï²þ¤á¤Æ o ¥ª¥Ö¥¸¥§¥¯¥È¤ËÊ£¼Ì¤µ¤ì¤Þ¤¹¡£
¤³¤¦¤·¤Æ°ÊÁ°¤Î¥¤¥ó¥¹¥¿¥ó¥¹¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤¿Í×ÁǤΥµ¥¤¥º·×¬·ë²Ì¤Ï¡¢¾å½ñ¤¤µ¤ì¤Æ¾Ã¼º¤·¡¢¿·¤·¤¤¸½ºß¤Î¸Æ¤Ó½Ð¤·¸µ¥¤¥ó¥¹¥¿¥ó¥¹¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ëÍ×ÁǤΥµ¥¤¥º¤¬ opts ¥ª¥Ö¥¸¥§¥¯¥È¤ËÊÝ»ý¤µ¤ì¡¢o ¥ª¥Ö¥¸¥§¥¯¥È¤ËÅÐÏ¿¤µ¤ì¤Þ¤¹¡£
¤³¤Î¥³¡¼¥É¤Ï¥×¥é¥°¥¤¥ó¥á¥½¥Ã¥É¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¤¬¡¢ÍÆ°×¤Ë slideToggleEx ¥×¥é¥°¥¤¥ó¤òÍøÍѤ¹¤ë¤¿¤á¤ËÉԲķç¤Ê¤â¤Î¤Ç¤¹¡£¤½¤·¤ÆºîÀ®¤Ë¤«¤Ê¤ê¶ìÏ«¤ò½Å¤Í¤¿Æñ»º¥³¡¼¥É¤Ç¤·¤¿¡£¤½¤³¤Ç°ìÀá¤òÀߤ±¤Æ¾ÜºÙ¤ËÀâÌÀ¤·¤Æ¤ª¤¤¿¤¤¤È»×¤¤¤Þ¤¹¡£
¢£ ¥¯¥ê¥Ã¥¯¥¤¥Ù¥ó¥È¤È slideToggleEx ŬÍÑÂоݤòÅÐÏ¿¤¹¤ë¤¿¤á¤Î¥³¡¼¥É ¡Ê ºÆ·Ç¤Ç¤¹ ¡Ë /* regist click Event to fire slideToggleEx() for nextBlock */ 1:$(function(){ // ÅöÁ³ DOM ¤¬ Ready ¤µ¤ì¤Æ¤«¤éµ¯Æ°¤¹¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£ 2:¡¡var duration = 1000, easing = null,fn = function(){}, clk = {}; 3:¡¡function func(i){ 4:¡¡¡¡$.each(clk[i],function(){ ¡¡¡¡¡¡¡¡// target ¥ª¥Ö¥¸¥§¥¯¥È¤Ï slideToggleEx Âоݤθġ¹¤Î¥Î¡¼¥É 1 ¤Ä¤À¤±¤ò³ÊǼ¤¹¤ë¡£ 5;¡¡¡¡¡¡var $target={}; ¡¡¡¡¡¡ ¡¡// $target ¥ª¥Ö¥¸¥§¥¯¥È¤Î j ¥×¥í¥Ñ¥Æ¥£¤Ë slideToggleEx ÂоݥΡ¼¥É¤ò³ÊǼ¤¹¤ë¡£ ¡¡¡¡¡¡ ¡¡// fireSlideToggleEx-x ¥¯¥é¥¹»ØÄꤵ¤ì¤¿¥Ü¥¿¥óÍ×ÁǤ¬¥Ö¥í¥Ã¥¯Í×ÁǤξì¹ç¤Ë¤Ï ¡¡¡¡¡¡ ¡¡// next sibling¤ò block °Ê³°¤Î inline Í×ÁǤξì¹ç¤Ë¤Ï¿ÆÍ×ÁǤΠ¡¡¡¡¡¡ ¡¡// next sibling Í×ÁǤò slideToggleEx ÂоݤȤ¹¤ë¡£ 6:¡¡¡¡¡¡$target[i] = $(this).css("display")=="block" ? $(this).next() : $(this).parent().next(); 7:¡¡¡¡¡¡if ($target[i].length) { 8:¡¡¡¡¡¡¡¡$(this).click(function(){ ¡¡ ¡¡¡¡¡¡¡¡¡¡// IE ¤Ë¤ª¤¤¤Æ¤Ï±¦Â¦¤ò¥¢¥Ë¥áµ¯½ªÅÀ¤Ë¤¹¤ë¤È¸Ç¤Þ¤ë»ö¤¬Â¿¤¤¤Î¤Ç¡¢ ¡¡ ¡¡¡¡¡¡¡¡¡¡// ¶¯À©Åª¤ËƱ¼ï¤Îº¸Â¦µ¯½ªÅÀ¤Ë»ØÄê¤òÂØ¤¨¤ë¡£ 9:¡¡¡¡¡¡¡¡¡¡if (jQuery.browser.msie) 10:¡¡¡¡¡¡¡¡¡¡¡¡var k = i==2 && 1 || i==3 && 4 || i==6 && 8 || i; 11:¡¡¡¡¡¡¡¡¡¡else k=i; ¡¡¡¡¡¡¡¡¡¡ ¡¡// slideToggleEx ¤òµ¯Æ°¤¹¤ë¡£ 12:¡¡¡¡¡¡¡¡¡¡$target[i].slideToggleEx(k, duration, easing, fn); 13:¡¡¡¡¡¡¡¡¡¡$(this).blur(); // ¥Ü¥¿¥óÍ×ÁǤΥե©¡¼¥«¥¹¤ò³°¤¹ 14:¡¡¡¡¡¡¡¡}); 15:¡¡¡¡¡¡} 16:¡¡¡¡}); 17:¡¡} 18:¡¡for (var i=0; i<9; i++){ // 0 ¤«¤é 8 Ëø¤Î½ä²ó½èÍý ¡¡ ¡¡¡¡// ¥¯¥ê¥Ã¥¯¥¤¥Ù¥ó¥È¤òÅÐÏ¿¤¹¤ë¥ª¥Ö¥¸¥§¥¯¥È clk ¤Î i ¥×¥í¥Ñ¥Æ¥£¤òºîÀ®¤·¡¢ ¡¡ ¡¡¡¡// ¤½¤ì¤Ë "fireSlideToggleEx-i"¡Ê i ¤Ï 0¡Á8 ¡Ë class ̾¤Î¥Î¡¼¥É¤ò¤â¤Ä ¡¡ ¡¡¡¡// jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤òÅÐÏ¿¤¹¤ë¡£¤³¤ì¤Ë¤è¤ê¡¢¥Ú¡¼¥¸Æâ¤Ë¤¢¤ë ¡¡¡¡¡¡ // fireSlideToggleEx-n ¥¯¥é¥¹Ì¾¤ò»ý¤Ä¥Î¡¼¥É¤òª¤¨¤ë¡£ 19:¡¡¡¡clk[i] = $(".fireSlideToggleEx-" + i); ¡¡ ¡¡¡¡// i ÈÖ̾¤Î¥Î¡¼¥É¤¬¤Ê¤±¤ì¤Ð loop ¤ÎÀèÆ¬¹Ô¤ËÌá¤Ã¤Æ i++ ¤¹¤ë¡£ 20:¡¡ if (!clk[i].length) continue; ¡¡¡¡ ¡¡// i ÈÖ̾¤Î¥Î¡¼¥É¤¬Â¸ºß¤·¤¿¾ì¹ç¤Ë¤Ï¡¢Åö³º¥¤¥ó¥¹¥¿¥ó¥¹¤Î ¡¡¡¡ ¡¡// ³Æ¥Î¡¼¥ÉËè¤Ë½ä²ó½èÍý¤ò¹Ô¤¦¤¿¤á¤Ë func ´Ø¿ô¤ò¸Æ¤Ó½Ð¤¹¡£ ¡¡¡¡ ¡¡// ¤³¤³¤Ë func ´Ø¿ô¤ÎÂè 1 °ú¿ô clk[i] ¤¬³°Â¦¤Î´Ø¿ôÆâ¤Ë¤¢¤ëÊÑ¿ô clk ¤Ø¤Î ¡¡¡¡ ¡¡// »²¾È¤òÊÝ»ý¤·¤Æ¤¤¤ë¤Î¤Ç¡¢func ´Ø¿ô¤Ï¥¯¥í¡¼¥¸¥ã¡¼¤È¤Ê¤Ã¤Æ¤¤¤ë¡£¤·¤«¤·¡¢ ¡¡¡¡ ¡¡// ¥°¥í¡¼¥Ð¥ë´Ä¶¤«¤é func ´Ø¿ô¤Ø¤Î»²¾È¤Ï¤Ê¤¤¤Î¤Ç¡¢¥¯¥í¡¼¥¸¥ã¡¼¤òÄ̤¸¤¿ ¡¡¡¡ ¡¡// ¥í¡¼¥«¥ëÊÑ¿ô¤Î³èÍѤϹԤäƤ¤¤Ê¤¤¡£ 21:¡¡¡¡func(i); 22:¡¡¡¡clk[i].hover( // ¥Þ¥¦¥¹¥ª¡¼¥Ð¡¼/¥¢¥¦¥È»þ¤Î¥Ü¥¿¥óÇØ·Ê¿§¤ÎÊѹ¹ 23:¡¡¡¡¡¡function(){$(this).css({backgroundColor:"pink"})}, 24:¡¡¡¡¡¡function(){$(this).css({backgroundColor:""})} 25:¡¡¡¡) 26:¡¡¡¡// ¥Þ¥¦¥¹¤¬²¡¤·²¼¤²¤é¤ì¤¿¾ì¹ç¤Î¿§Âؤ¨ 27:¡¡¡¡.mousedown(function(){$(this).css('background-color','palegreen')}) 28:¡¡} 29:});
Í×ÅÀ¤Ï°Ê²¼¤ÎÄ̤ê¤Ç¤¹¡£
°Ê¾å¤ÎÍ×ÅÀ¤òƧ¤Þ¤¨¤¿¥³¡¼¥É¤Ï·ë¹½Ê£»¨¤Ê¹½À®¤Ë¤Ê¤ê¤Þ¤·¤¿¡£
¤½¤³¤Ç IE ¤Ë¸Â¤Ã¤Æ±¦Â¦¤Îµ¯½ªÅÀ¤òÍøÍѤ»¤º¤Ë¡¢Æ±Åù¤Îº¸Â¦µ¯½ªÅÀ¤È¤Ê¤ë¤è¤¦¤ËÊÑ´¹¤·¤Þ¤¹¡£
²òÆÉ¤È¤ÏÂç·¶ºÀ¤¹¤®¤ë¤«¤â¤·¤ì¤Þ¤»¤ó¤¬¡¢°ì¸«Ê£»¨¤Ë¸«¤¨¤ë easing ´Ø¿ô¼°¤Ç¤¹¤¬¡¢¼Â¤ÏÃæ³ØÀ¸ÄøÅ٤δؿô¤ÎÃ챤¬¤¢¤ì¤Ð½½Ê¬Íý²ò¤Ç¤¤ë¤â¤Î¤Ç¤¢¤ë¤³¤È¤ò¡¢ÃѤº¤«¤·¤Ê¤¬¤éºÇ¶áǼÆÀ¤·¤¿¤Ð¤«¤ê¤Ê¤Î¤Ç¤¹¡£
¤½¤³¤Ç¡¢easing ´Ø¿ô¤¬¼Â¤Ï´Êñ¤ÊÂå¿ô¼°¤Ç¤¢¤ë¤³¤È¤ò²þ¤á¤ÆÀ°Íý¤·¤Æ¤ª¤³¤¦¤È»×¤¤¤Þ¤¹¡£¤½¤ì¤âÃæ³Ø¹»¤ÇÊ臘´Ø¿ô¤Î·Á¼°¤Ë¡¢É½¸½¤·Ä¾¤·¤Æ¤ß¤Þ¤¹¡£
ÂоݤȤ¹¤ë easing ´Ø¿ô¤Ï jquery.js ¤ÇÄêµÁ¤µ¤ì¤Æ¤¤¤ë linear µÚ¤Ó swing ¤Î¾¡¢George Smith »á¤Ë¤è¤ë 30 ¼ïÎà¤Î easing ´Ø¿ô¤Ç¤¹¡£
ÂçÁ°Äó¤È¤·¤Æ¡¢jquery.js ¤Ë¤ª¤±¤ëÀµµ¬²½¤òƧ¤Þ¤¨¤ë¤Î¤Ç¡¢easing Âå¿ô¼°¤Îʸ»ú¤Î°ÕÌ£¤Ï¼¡¤Î¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£
t: current time ¡§¤³¤ì¤Ï·Ð²á»þ´Ö¤Ç¤¹¤¬¡¢jquery.js ¤Ë¤ª¤¤¤Æ¤Ï¡¢t ¤ò d ¤Ç³ä¤Ã¤¿·Ð²á»þ´Ö¿ä°ÜΨ¤È¤Ç¤â¸Æ¤Ö¤Ù¤Ãͤ¬ t ¤ËÂåÆþ¤µ¤ì¡¢¤½¤ì¤¬¥°¥é¥Õ¤Î²£¼´ÊÑ¿ôÃͤȤʤê¤Þ¤¹¡£
b: begInnIng value ¡§ ½é´üÃÍ¤Ï jquery.js ¤Ç¤Ï¾ï¤Ë 0 ¤Ç¤¹¡£b = 0
c: change In value ¡§ ÊÑÆ°ÃÍ¤Ï jquery.js ¤Ç¤Ï¾ï¤Ë 1 ¤Ç¤¹¡£c = 1
d: duration ¡§ ·Ñ³»þ´Ö¤Ç¤¹¤¬¡¢´Ø¿ô¼°¤ÎÃæ¤Ë¤ÏľÀÜÅо줹¤ë¤³¤È¤ÏËØ¤É¤¢¤ê¤Þ¤»¤ó¡£
x ¢ª 1¡Ýx, y ¢ª 1 - y ¤Ø¤ÈºÂɸÊÑ´¹¤ò»Ü¤¹¤³¤È¤Ë¤è¤Ã¤Æ¡¢easeIn ´Ø¿ô¤«¤é¼«Æ°Åª¡¦È¿¼ÍŪ¤Ë easeOut ´Ø¿ô¤¬Æ³¤½Ð¤»¤Þ¤¹¡£
¤³¤Î´Ø¿ô¤Ï¡¢·Ð²á»þ´Ö¿ä°ÜΨ¤¬ 0.5 °Ê²¼¤Î¾ì¹ç¤Ë¤Ï easeIn ´Ø¿ô¤ò¡¢¤½¤ì°Ê¾å¤Î»þ¤Ë¤Ï easeOut ´Ø¿ô¤òŬÍѤ¹¤ë¤À¤±¤Î¤³¤È¤Ç¤¹¡£
¤Ä¤Þ¤ê¡¢easeIn ´Ø¿ô¤¬Ê¬¤«¤ì¤Ð¡¢ºÂɸÊÑ´¹¤È¾ì¹çʬ¤±¤Ë¤è¤Ã¤Æ¡¢´Êñ¤Ë easeOut ´Ø¿ô¤ÈeaseInOut ´Ø¿ô¤¬½ÐÍè¤Æ¤·¤Þ¤¦¤Î¤Ç¡¢easeIn ´Ø¿ô¤À¤±¡ã²òÆÉ¡ä¤¹¤ì¤ÐɬÍפˤ·¤Æ½½Ê¬¤Ç¤¹¡£
°Ê²¼¤Î¼°¤Ë¤ª¤¤¤Æ¡¢x ¤Ï»þ´Ö¿ä°ÜΨ¡Ê t/d ¡Ë¤ò¡¢y ¤Ï easing ´Ø¿ôÃͤòɽ¤·¤Æ¤¤¤Þ¤¹¡£b,c,t,d ¤Ï easing ´Ø¿ô¤ÇÄê¤á¤é¤ì¤Æ¤¤¤ëÄ̤ê¤ÎÄêµÁ¤Ç¤¹¡£¾å¤Ë½Ò¤Ù¤¿»ö¤òƧ¤Þ¤¨¤Æ b = 0, c = 1, t/=d ¢ª x ¤È¤·¤Þ¤·¤¿¡£
| ´Ø¿ô̾ | Javascript´Ø¿ô¼° | ¸«´·¤ì¤¿´Ø¿ô¼° |
|---|---|---|
| linear | b + c * t | y = x |
| swing | ((-Math.cos(t * Math.PI)/2) + 0.5) * c + b | y = -( cos(x * ¦Ð) ) / 2 + 0.5 |
| easeInQuad | c*(t/=d)*t + b | y = x 2 |
| easeInCubic | c*(t/=d)*t*t + b | y = x 3 |
| easeInQuart | c*(t/=d)*t*t*t + b | y = x 4 |
| easeInQuint | c*(t/=d)*t*t*t*t + b | y = x 5 |
| easeInSine | -c * Math.cos(t/d * (Math.PI/2)) + c + b | y = - cos(x * ¦Ð/2) + 1 |
| easeInExpo | (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b | y = 2 10 * ( x-1 ), x ¤¬ 0 ¤Î»þ¤Ï y = 0 |
| easeInCirq | -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b | y = - (1 - x * x)0.5 + 1 |
| easeInBack | if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; | y = x * x * ( 2.70158 * x - 1.70158 ) |
| easeOutBounce | ((t/=d) < (1/2.75)) ¡¡c*(7.5625*t*t) + b; (t < (2/2.75)) ¡¡c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; (t < (2.5/2.75)) ¡¡c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; else ¡¡c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; | ¡¦x < 1/2.75 ¢ª 7.5625* x * x ¡¦x < 2/2.75 ¢ª 7.5625* (x-1.5/2.75) * (x-1.5/2.75) +0.75 ¡¦x < 2.5/2.75 ¢ª 7.5625* (x-2.25/2.75) * (x-2.25/2.75) +0.9375 ¡¦x >= 2.5/2.75 ¢ª 7.5625* (x-2.625/2.75) * (x-2.625/2.75) +0.984375 |
| easeInElastic |
var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | ºîÀ®Ãæ |
¥¢¥Ë¥á¡¼¥·¥ç¥ó³èÍÑ¥¨¥ó¥È¥ê¥¤¤Î 2 ¤ÄÌܤϡ¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò³èÍѤ·¤Æ¥°¥é¥Õ¤ò½ñ¤¯¥³¥ó¥Æ¥ó¥Ä¤Ç¤¹¡£
¤½¤â¤½¤â¡¢easing ´Ø¿ô¤Î¥°¥é¥Õ²½¤ò¹Í¤¨¤Æ¤¤¤¿¤Î¤Ç¤¹¤¬¡¢¥¨¥¯¥»¥ë¤Ê¤É¤Çºî¤Ã¤ÆÅ½¤êÉÕ¤±¤ë¤Î¤Ï;¤ê¤Ë¤â·Ý¤¬¤Ê¤¤¤È»×¤ï¤ì¡¢²¿¤È¤« Web ¥µ¥¤¥È¾å¤ÇưŪ¤Ë¥°¥é¥Õ¤¬ÉÁ¤±¤Ê¤¤¤À¤í¤¦¤«¡¢¤ÈÁ°¤«¤é»×¤Ã¤Æ¤¤¤Þ¤·¤¿¡£
¤½¤·¤Æ jquery.js ¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó²òÆÉ¤ò¿Ê¤á¤Æ¤¤¤¯Æâ¤Ë¡¢easing ´Ø¿ô¤½¤ì¼«ÂΤ˶½Ì£¤ò»ý¤Ã¤¿¤³¤È¤ÈÊ»¤»¤Æ¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î options.step ¥á¥½¥Ã¥É¤ò»È¤¨¤Ð¡¢¥¢¥Ë¥áÅÓÃæ¤Î¾ðÊó¤ò¼èÆÀ¤Ç¤¤ë¤Î¤Ç¥°¥é¥Õ¤¬½ñ¤±¤ë¨¡¨¡¨¡ÆþÍáÃæ¤Ë¤Õ¤È¡Ê¶ì¾Ð¡Ë¡¢¤½¤Î¤³¤È¤Ëµ¤ÉÕ¤¤Þ¤·¤¿¡£
¹½ÁÛŽÆ 1 Æü´Ö¡¢¥³¡¼¥Ç¥£¥ó¥°¤ËÌó 2 Æü¤òÍפ·¤Æ¡Ê ¤È¸À¤Ã¤Æ¤â¶Ð¤á¤Ê¤¬¤é¤Ê¤Î¤Ç¡¢Ìë¤ÈÄ«¤À¤±¤Î¥Þ¥¤¥¿¥¤¥à¤Ç¤¹¤¬ ¡Ë¡¢²¿¤È¤«¶ñÂÎŪ¤ÊÀ®²Ì¤ËÁ椮Ã失¤Þ¤·¤¿¡£
°Ê²¼¤¬¤½¤Î·ë²Ì¤Ç¤¹¤¬¡¢²¿¤Ï¤È¤â¤¢¤ì¡¢¥¢¥Ë¥á·Ñ³»þ´Ö¤ò 2 Éä« 4 ÉÃÄøÅ٤ˤ·¡¢Å¬Åö¤Ê easing ´Ø¿ô¤òÁªÂò¤·¤Æ¤«¤é¡¢¥°¥é¥ÕºîÀ®¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤·¤Æ¤ß¤Æ¤¯¤À¤µ¤¤¡£
¶Ï¤« 3 ¥¯¥ê¥Ã¥¯¤Ç¡¢º£ÁªÂò¤·¤¿·Ñ³»þ´Ö¤òÍפ·¤ÆÀĤ¤¥Ü¥Ã¥¯¥¹¤¬º¸²¼¤ËÊĤ¸¤é¤ì¡¢¤½¤Î¸å¤Þ¤¿Æ±¤¸·Ñ³»þ´Ö¤ò»È¤Ã¤Æ±¦¾åÊý¸þ¤Ë³«¤«¤ì¤Þ¤¹¡£¤³¤ì¤Ç¡Ö ¥°¥é¥Õ¤ÎºÂɸ ¡×¤¬´°À®¤·¤Þ¤¹¡£
¤½¤·¤Æ¥Ü¥Ã¥¯¥¹¤¬³«¤½ª¤ï¤ë¤È¡¢¿ô10¥ß¥ê¡Á¿ô100¥ß¥êÉøå¤Ë¤½¤Î¥Ü¥Ã¥¯¥¹Æâ¤Ë¡¢º£Å¬ÍѤµ¤ì¤¿ easing ´Ø¿ô¤Î¥°¥é¥Õ¤¬ÉÁ¤«¤ì¤Þ¤¹¡£¤³¤Î¤È¤¥Ü¥Ã¥¯¥¹²¼Êդϥ°¥é¥Õ²£¼´¤È¤Ê¤Ã¤Æ·Ñ³»þ´Ö¤Î¿ä°Ü³ä¹ç¤ò¼¨¤·¡¢¡¢¥Ü¥Ã¥¯¥¹º¸ÊդϽļ´¤È¤Ê¤ê easing ´Ø¿ôÃͤòɽ¤·¤Æ¤¤¤Þ¤¹¡£
¤Ê¤ª¡¢¥°¥é¥Õ¤ÎÂ礤µ¤ÏÁêÂÐŪ¤ÊÌäÂê¤Ë²á¤®¤Þ¤»¤ó¡¢°Ê²¼¤ÎÎ㼨¤Î¾ì¹ç¤Ë¤Ï¡¢ÀĤ¤¥Ü¥Ã¥¯¥¹¤ÎÂ礤µ¡Ê¤Ä¤Þ¤ê¥°¥é¥ÕºÂɸ¡Ë¤ò¡¢¥ì¥¤¥¢¥¦¥È¾å¤ÎɬÍ×À¤«¤é¶ö¡¹ 350 px ³Ñ¤È¤·¤Þ¤·¤¿¡£¤½¤Î·ë²Ì£Ø¼´¡¢£Ù¼´Î¾Êý¸þ¤È¤â¡¢»þ´Ö¿ä°Ü³ä¹ç¤È´Ø¿ôÃͤò 350 Çܤ·¤Æ¥°¥é¥Õ¤òºîÀ®¤·¤Æ¤¤¤Þ¤¹¡£
¡ÚÃí°Õ¡Û
IE ¤Ç¤Ï´Ø¿ôÃͤ¬ 0 ̤Ëþ¤Þ¤¿¤Ï 1 ¤ò±Û¤¨¤ë easing ´Ø¿ô¤Î¾ì¹ç¡¢¸Ç¤Þ¤Ã¤Æ¤·¤Þ¤¦¤è¤¦¤Ç¤¹¡£¤Ç¤¹¤«¤é Back¡¢Elastic ¤Ê¤É¤Ï IE ¤Ç¤Ï¥°¥é¥ÕÉÁ²è¤Ï½ÐÍè¤Þ¤»¤ó¤¬¡¢¤â¤·¸Ç¤Þ¤Ã¤¿¾ì¹ç¤Ë¤Ï¡¢¤³¤ÎÊǤò¥ê¥í¡¼¥É¤¹¤ì¤Ð¡¢Javascript ¤Î ¡Ö ¶Å¸Ç¾õÂÖ ¡× ¤ò²ò½ü½ÐÍè¤Þ¤¹¡£
¡Ö easing ¡× ¤Ï®ÅÙ¤òÁý¸º¤¹¤ë¤È¤¤Ë»È¤¦¤â¤Î¡¢¤È¤µ¤ì¤Æ¤¤¤Þ¤¹¡£¡Ê ¥¤¡¼¥¸¥ó¥° (Easing) ¤È¤Ï | FLASH´ØÏ¢ÍѸ콸 | ¥ß¥Ä¥¨¡¼¥ê¥ó¥¯¥¹ ¡Ë¡£¤Ä¤Þ¤ê easing ´Ø¿ô¤Ïư¤¤ò²Ã®¤·¡¢¤¢¤ë¤¤¤Ï¸ºÂ®¤¹¤ë²Ã®ÅÙ¤ÎÌò³ä¤ò¤â¤Ã¤Æ¤¤¤Þ¤¹¡£
¤½¤·¤Æ¡¢²£¼´¤Ë»þ´Ö¤ò¡¢½Ä¼´¤ËÊÑÆ°Ãͤò¼è¤Ã¤Æ¡Ö ư¤ ¡×¤ò¥°¥é¥Õ²½¤·¤¿¾ì¹ç¤Ë¤ª¤¤¤Æ¡¢¤½¤ì¤¬Ä¾Àþ¤Ç¤¢¤ì¤ÐÅù®¤Çư¤¤¤¿¤³¤È¤òɽ¤·¡¢Ä¾Àþ¤Î³ÑÅ٤ϮÅ٤ιâÄã¤ò°ÕÌ£¤·¤Þ¤¹¡£¤½¤·¤ÆÄ¾Àþ¤Ç¤Ê¤¤¶ÊÀþÉôʬ¤Ï¡¢²Ã®ÅÙ¤¬Æ¯¤¤¤¿Éôʬ¤Ç¤¢¤ê¡¢¾å¤ËÆÌ¤Ê¤é¤Ð¸ºÂ®¡¢²¼¤ËÆÌ¤Ê¤é¤Ð²Ã®¤È¤Ê¤ê¤Þ¤¹¡£
¤µ¤Æ¡¢easing ´Ø¿ô¤Ï Tween ¥¯¥é¥¹¤Î¾ì¹ç¤â jquery.js ¤Î¾ì¹ç¤â¡¢´ðËÜŪ¤Ë¼¡¤Î 4 ¤Ä¤ÎÊÑ¿ô¤Ë¤è¤êÊѲ½¤¹¤ëÆó¼¡¸µ´Ø¿ô¤Ç¤¹¡£½é´üÃÍ(b)¡¢ÊÑÆ°Éý(c)¡¢¥¢¥Ë¥á¤Î·Ñ³»þ´Ö(d¡Ë¡¢¤½¤·¤Æ¸½ºß¤Þ¤Ç¤Î·Ð²á»þ´Ö(t)¤Ç¤¹¡£¤Ä¤Þ¤ê¡¢Ãæ³Ø¹»»þÂå¤ËÊï¤Ã¤¿ÆëÀ÷¤ß¤Î´Ø¿ô¼° y = f (x) ¤Ë¤Ê¤¾¤é¤¨¤ì¤Ð¡¢easing ´Ø¿ô¤Î´ðËÜ·Á¼°¤Ï¼¡¤Î¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£
ÊÑÆ°¸å¤ÎÃÍ = f ( ½é´üÃÍ, ÊÑÆ°Éý, ·Ð²á»þ´Ö, ·Ñ³»þ´Ö )
¤³¤³¤Ë¤ª¤¤¤Æ»þ´Ö¤È¶¦¤ËÊѲ½¤¹¤ëÊÑ¿ô¤Ï¤¿¤À 1 ¤Ä ·Ð²á»þ´Ö¤Ç¤¢¤ê¡¢¸å¤ÏÁ´¤ÆÄê¿ôÃͤȤʤê¤Þ¤¹¡£ÌÞÏÀ¡¢ÊÑÆ°Éý¤ò»þ´Ö¤Î´Ø¿ô¤Ë¤¹¤ì¤Ð¡¢¤½¤ì¤âÊѲ½¤¹¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¤¬¡¢¤½¤Î¾ì¹ç¤Ç¤¢¤Ã¤Æ¤âÊÑÆ°Éý¤Ï·Ð²á»þ´Ö¤Î´Ø¿ô¤Ç¤¢¤ê¡¢·ë¶É·Ð²á»þ´Ö¤¬Í£°ì¤ÎÊÑ¿ô¤È¤Ê¤ê¤Þ¤¹¡£
jquery.js ¤Ç¤ÏÊÑÆ°Éý¡Ê c : change ¤Çɽ¤µ¤ì¤ë¾ì¹ç¤¬Â¿¤¤ ¡Ë¤òÀµµ¬²½¤·¤Æ¤¤¤Þ¤¹¡£¤Ä¤Þ¤ê 0 ¤«¤é»Ï¤Þ¤ê 1 ¤Ç½ª¤ï¤ë¤è¤¦¤Ë°ú¿ô¤¬ÀßÄꤵ¤ì¤Æ¤¤¤Þ¤¹¡Êjquery.js ver1.32 #4139¡Ë¡£¤³¤ì¤Ë¤è¤ê´Ø¿ô¤Ï¤¤¤ï¤Ð½ã²½¤µ¤ì¡¢»ö¤ÎËܼÁ¤¬Ê¬¤«¤ê¤ä¤¹¤¯¤Ê¤Ã¤Æ¤¤¤Þ¤¹¤·¡¢¤½¤Î¤³¤È¤¬ easing ´Ø¿ô¤Ø¤ÎÍý²ò¤ò¿¼¤á¤ë°ì½õ¤È¤â¤Ê¤Ã¤Æ¤¤¤ë¤È»×¤¤¤Þ¤¹¡£
jquery.js ¤Ë´Þ¤Þ¤ì¤Æ¤¤¤ë easing ´Ø¿ô¤Ï linear ¤È swing ¤Î 2 Îà¤À¤±¤Ç¤¹¤¬¡¢¤½¤ì¤Ë30¼ïÎà¤òÄɲ乤ë¥×¥é¥°¥¤¥ó ¡Ê George Smith »á¤Ë¤è¤ë 30 ¼ïÎà¤Î easing ´Ø¿ô ¡Ë ¤¬¤¢¤ê¤Þ¤¹¡£
¥¨¥ó¥È¥ê¥¤¤ò²þ¤á¤Æ¡¢¤³¤ì¤é¤Î 32 ¼ïÎà¤Î easing ´Ø¿ô¤ÎÁ´ËƤò¡¢Àν¬¤Ã¤¿¿ô³Ø¤Î´Ø¿ô¼°¤ò»×¤¤½Ð¤·¤Ê¤¬¤é²òÌÀ¤·¤è¤¦¤È»×¤Ã¤Æ¤¤¤Þ¤¹¡£
options.step ¥á¥½¥Ã¥É¤ò»È¤¤¤Þ¤¹¡£
»ä¤¬º£¼«Âð¤Ç»ÈÍѤ·¤Æ¤¤¤ë¥Ñ¥½¥³¥ó¤Ç¤Ïޤ Firefox ¤Ç¤³¤ÎÊǤò³«¤¤¤Æ·×¬¤·¤Æ¤ß¤¿¤È¤³¤í¡¢jquery.js ¤ÎÆâÉô¥á¥½¥Ã¥É¤Ç¤¢¤ë e.step ¥á¥½¥Ã¥É¤Ï¡¢1 ¤Ä¤Î¥¢¥Ë¥áÂоÝÍ×ÁǤΠ1 ¤Ä¤Î¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£Åö¤¿¤ê¡¢1 Éô֤ËÌó 80 ²ó¼Â¹Ô¤µ¤ì¤Þ¤¹¡£¡ÊIE ¤Î¾ì¹ç¡¢IE 8 ¤Ç¤¢¤Ã¤Æ¤â²ó¿ô¤Ï¤â¤Ã¤È¾¯¤Ê¤¯¤Ê¤ê¤Þ¤¹¡£Javascript ¼Â¹Ô®ÅÙ¤¬ÃÙ¤¤¤¿¤á¤Ç¤¹¡£¡Ë
¤³¤Î¤½¤ì¤¾¤ì¤Î½Ö´ÖËè¤Ë¡¢ animate ¥á¥½¥Ã¥É¤Î°ú¿ô¤È¤·¤Æ»ØÄꤹ¤ë options.step ¥á¥½¥Ã¥É¤òÍøÍѤ·¤Æ¡¢¡Ê jquery.js ¤ÎÆâÉô¤ÇºîÀ®¤µ¤ì¤ë ¡Ë e ¥¤¥ó¥¹¥¿¥ó¥¹¤ËÊÝ»ý¤µ¤ì¤Æ¤¤¤ë¥¢¥Ë¥á½ô¾ðÊó¤ò¼èÆÀ¤·¤Þ¤¹¡£
easing ´Ø¿ôÃÍ¤Ï e.pos ¥×¥í¥Ñ¥Æ¥£¤ËÊÝ»ý¤µ¤ì¤Æ¤¤¤Þ¤¹¤Î¤Ç¡¢¤³¤ì¤ò¼è¤ê¤À¤·¤ÆÇÛÎó¤Ë³ÊǼ¤·¡¢¤½¤Î¸å¤½¤ÎÇÛÎó¤Î³ÆÍ×ÁǤò»È¤Ã¤Æ¡¢e.step ¤¬´ÖݼŪ¤Ë¼èÆÀ¤·¤¿¾ðÊ󤫤顢¼èÆÀ¤·¤Ê¤«¤Ã¤¿Ãæ´ÖÃͤòÊä´Ö¤¹¤ë·×»»¤ò¹Ô¤ï¤»¤Æ¡¢¶õ·äÉô¤òËä¤á¤Þ¤¹¡£
¤³¤¦¤·¤Æ²£¼´¤ÎÁ´¤Æ¤Î¥Ô¥¯¥»¥ë¿ô 350 ¸Ä¤ËÂбþ¤¹¤ë´Ø¿ôÃͤò¼èÆÀËô¤Ï¿äÄꤷ¡¢¥°¥é¥Õ²½¤·¤Þ¤¹¡£
¥°¥é¥Õ¤Ï 1 ¡ß 1 dot ¤ÎÅÀ¤ò ½ç¤ËÀĤ¤¥Ü¥Ã¥¯¥¹Æâ¤Ë append ¤¹¤ë¤³¤È¤Ë¤è¤êÉÁ¤¤Þ¤¹¡£
¾ÜºÙ¤Ï¥³¡¼¥É²òÀâÉôʬ¤Ç¿¨¤ì¤Þ¤¹¡£
¡Ö ̵»ë¤Ç¤¤ë¤Û¤É¾®¤µ¤¤Éôʬ¤Ç¤Ï¶ÊÀþ¤ÏľÀþ¤È¸«¤Ê¤¹¤³¤È¤¬½ÐÍè¤ë ¡×¤È¤¤¤¦Èùʬ¤Î¹Í¤¨Êý¤Ëµò¤ê¤Þ¤·¤¿¡£·è¤·¤ÆÊ£»¨¤Ç¤Ï¤Ê¤¯¡¢¤Ä¤Þ¤ê¤Ïñ¤Ê¤ëľÀþÊä´Ö¤Ç¤¹¡Ê¶ì¾Ð¡Ë¡£
ÅöÁ³¥¢¥Ë¥á·Ñ³»þ´Ö¤òŤ¯¤¹¤ì¤Ð¤¹¤ë¤Û¤É¡¢step¥á¥½¥Ã¥É¤Î¸Æ¤Ó½Ð¤·²ó¿ô¤¬Áý¤¨¤ë¤Î¤Ç¡¢Êä´ÖÃͤ¬¸º¤ê¡¢step ¥á¥½¥Ã¥É¤Ë¤è¤ë»»½ÐÃͤ¬Áý¤¨¡¢¥°¥é¥Õ¤ÏÀµ³Î¤µ¤òÁý¤·¤Þ¤¹¡£
¤³¤Î¤³¤È¤Ï·Ñ³»þ´Ö¤òĹûÊѤ¨¤Æ¥°¥é¥Õ¤òÉÁ¤«¤»¤Æ¤ß¤ë¤ÈÎɤ¯Ê¬¤«¤ê¤Þ¤¹¡£·Ñ³»þ´Ö¤¬Ã»¤¤¤È¥°¥é¥Õ¤ÏľÀþÉôʬ¤¬Áý¤¨¡¢Ä¹¤¯¤¹¤ë¤ÈľÀþ¤¬¸º¤Ã¤Æ¤¤¤¤Þ¤¹¡£¤³¤ì¤Ï·×»»¤Ë¤è¤ê»»½Ð¤·¤¿Êä´ÖÃͤοô¤¬¸º¤ë¤¿¤á¤Ç¤¹¡£
¤³¤Î·ï¤Ë´Ø¤¹¤ë¾ÜºÙ¤â¥³¡¼¥É²òÀâÉôʬ¤Ç¿¨¤ì¤Þ¤¹¡£
¤³¤³¤Ç¹Ô¤Ã¤¿¤³¤È¤Ï¡¢¥Ü¥Ã¥¯¥¹¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò°ú¤µ¯¤³¤·¤Ä¤Ä¡¢¤½¤Î¥Ü¥Ã¥¯¥¹Æâ¤Ë¤½¤Î¥¢¥Ë¥á¤Ë»ÈÍѤ·¤¿ easing ´Ø¿ô¤Î¥°¥é¥Õ¤ò½ñ¤«¤»¤ë¤È¤¤¤¦Ê£¹çŪ¤Ê¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ç¤¹¡£
¤½¤ì¸Î¤Ë¡¢¥³¡¼¥Ç¥£¥ó¥°¤Ç¤Ï¥°¥é¥Õ¤òÉÁ¤«¤»¤ë¥¿¥¤¥ß¥ó¥°¤Ë¤Ä¤¤¤Æ¡¢´ö¤Ä¤«¥Æ¥¹¥È¤·¤Ê¤¬¤éÄ´À°¤·¤Þ¤·¤¿¡£Ã©¤êÃ夤¤¿¤Î¤Ï¡¢options.step ¥á¥½¥Ã¥É¤ÎºÇÃæ¤Ç¤â¤Ê¤¯¡¢´°Á´¤Ë¥¢¥Ë¥á¤¬½ª¤ï¤Ã¤Æ¤«¤é¤Ç¤â¤Ê¤¯¡¢step ¥á¥½¥Ã¥É¤Ë¤è¤ë¾ðÊó¼èÆÀ¤¬½ª¤ï¤Ã¤¿Ãʳ¬¤Çľ¤°¤ËÊä´ÖÃÍ»»½Ð¤ò»Ï¤á¤µ¤»¡Ê ¤³¤ÎÃʳ¬¤Ç¤Ï¥¢¥Ë¥á¡¼¥·¥ç¥óưºî¤Ï¿Ê¹ÔÃæ¤Ç¤¹ ¡Ë¡¢¤«¤Ä¤½¤ÎÊä´ÖÃÍ·×»»¤¬½ª¤ï¤Ã¤¿¤éľ¤°¤Ë¥°¥é¥ÕÉÁ²è¤ò»Ï¤á¤µ¤»¤ë¡¢¤È¤¤¤¦Ê»¹ÔŪ¤Ê¥³¡¼¥É¿Ê¹Ô¤Ç¤·¤¿¡£
Êä´ÖÃÍ·×»»¤ä¥°¥é¥Õ¤Î¥×¥í¥Ã¥Èºî¶È¤¬¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¿Ê¹Ô¤Ë´³¾Ä¤»¤º¡¢¤«¤Ä¥¢¥Ë¥á´°Î»¸å½ÐÍè¤ë¤À¤±Ã»»þ´Ö¤Ç¥°¥é¥ÕÉÁ²è¤ò¹Ô¤ï¤»¤ëºÇŬ¤ÊÊýË¡¤òõ¤Ã¤¿·ë²Ì¤³¤¦¤Ê¤ê¤Þ¤·¤¿¡£
¼¡¤Ë¡¢2 ¤Ä¤Î¥Ð¡¼¥¸¥ç¥ó¤òºî¤Ã¤¿·Ð°Þ¤ò½ñ¤¤¤Æ¤ª¤¤¿¤¤¤È»×¤¤¤Þ¤¹¡£
ºÇ½é¤ËºîÀ®¤·¤¿¤Î¤Ï°Ê²¼¤Ë·Ç¤²¤¿ Ver 1 ¤Ç¤¹¡£¤³¤Î¥³¡¼¥É¤ÏÎɤ¯¸«ÅϤ¹¤È¡¢drawGraph ¥á¥½¥Ã¥É¤¬¸Æ¤Ð¤ì¤ëÅÙËè¤Ë¡¢¥¢¥Ë¥áÂоݤι⤵¡¦Éý¤ò·×»»¤·¡¢±£ÊÃ/ɽ¼¨ÍÑ¥¢¥Ë¥á CSS ¤òºî¤ê¡¢duration¡¦easing¡¦complete ¤ò»»½Ð¤·¡¢step ¥á¥½¥Ã¥É¤òÅÐÏ¿¤·¤Æ¤¤¤Þ¤¹¡£¤³¤ì¤Ï¤¤¤«¤Ë¤â̵Â̤Ǥ¹¡£
¤½¤³¤ÇÆóÅÙÌܰʹߤΠdrawGraph ¥á¥½¥Ã¥É¸Æ¤Ó½Ð¤·»þ¤Ë¤Ï¡¢½é²ó¸Æ¤Ó½Ð¤·»þ¤Ë»»½Ð¤·¤¿³ÆÃͤò²Äǽ¤Ê¸Â¤êºÆÍøÍѤ¹¤ë¤è¤¦¤Ê¥³¡¼¥É¿Ê¹Ô¤ËÊѹ¹¤¹¤Ù¤¤À¤È»×¤¤¡¢Ver 2 ¤òºî¤ê¤Þ¤·¤¿¡£
¢£¥×¥é¥°¥¤¥ó drawGraph() ¥á¥½¥Ã¥É¥³¡¼¥É // ¢§ Ver 2 : ¥³¡¼¥É¿Ê¹Ô¤Î¸úΨ²½¤ò¹Íθ¤·¤¿²þÄûÈÇ 1:(function($){ 2:$.fn.drawGraph = function(d,e,fn){ 3:¡¡var $box=this, o={}, cnt=0, allsteps=0,layout=[], dotAry=[], arrgAry=[]; ¡¡¡¡// ¥á¥½¥Ã¥É¼Â¹Ô¸å¤â o ¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£ÃͤòÊÝ»ý¤µ¤»¤ë¤¿¤á¤Ë¡¢ ¡¡¡¡// drawGraph ¥á¥½¥Ã¥É¤Î opts ¥×¥í¥Ñ¥Æ¥£¤òºî¤ë¡£ 4:¡¡if (!arguments.callee.opts) arguments.callee.opts={}; ¡¡ ¡¡// drawGraph ¥á¥½¥Ã¥É¤Î opts ¥×¥í¥Ñ¥Æ¥£¤¬¤¢¤ì¤Ð¡¢o ¥ª¥Ö¥¸¥§¥¯¥È¤ËÊ»¹ç¤¹¤ë¡£ ¡¡ ¡¡// ¤³¤ì¤Ë¤è¤ê 2 ÅÙÌܰʹߤΠdrawGraph ¸Æ¤Ó½Ð¤·»þ¤Ë o ¥ª¥Ö¥¸¥§¥¯¥È¤Ë opts ¤¬Ê£¼Ì¤µ¤ì¤ë¡£ ¡¡ ¡¡// ¤½¤Î opts ¤Ï¡¢Ä¾Á°¤Î drawGraph ¥á¥½¥Ã¥É¼Â¹Ô»þ¤Ë 6 ¡Á 19 ¹Ô¤ÇºîÀ®¤µ¤ì¤¿ o ¥ª¥Ö¥¸¥§¥¯¥È¤¬ ¡¡ ¡¡// 20 ¹Ô¤Ë¤ª¤¤¤ÆÊ£¼Ì¤µ¤ì¤¿¤â¤Î¤Ê¤Î¤Ç¡¢2 ÅÙÌܰʹߤΠdrawGraph ¸Æ¤Ó½Ð¤·»þ¤Ë¤Ï¡¢ ¡¡ ¡¡// ľÁ°¼Â¹Ô»þ¤ËºîÀ®¤·¤¿¥×¥í¥Ñ¥Æ¥£¤¬ o ¥ª¥Ö¥¸¥§¥¯¥È¤Ë³ÊǼ¤µ¤ì¤ë¡£ 5:¡¡else $.extend(o, arguments.callee.opts); ¡¡ ¡¡// box ¥×¥í¥Ñ¥Æ¥£¤¬¤Ê¤¤¤«¡Ê½é²ó¸Æ¤Ó½Ð¤·»þ¡Ë¡¢ÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë¥Î¡¼¥É¤¬°Û¤Ê¤ë¾ì¹ç ¡¡ ¡¡//¡Êº£²ó¤Î»È¤¤Êý¤Ç¤Ï¸Æ¤Ó½Ð¤·¸µ¤Ï¾ï¤ËƱ°ì¤Ê¤Î¤Ç¡¢¥Î¡¼¥É¤¬°Û¤Ê¤ë¤³¤È¤Ï¤Ê¤¤¤¬ ¡¡ ¡¡// °ìÈ̲½¤¹¤ë¤¿¤á¤Ë´º¤¨¤Æ¸å¼Ô¤Î¾ò·ï¤ò½ñ¤¤¤Æ¤ª¤¯¡£¡Ë 6:¡¡if (!o.box || o.box[0] !== $box[0] ) { 7:¡¡¡¡o.box = $box; // this ¤Ø¤Î»²¾È¤òÅÐÏ¿¤¹¤ë 8:¡¡¡¡o.log = $box.next(); // log ɽ¼¨ÍѥΡ¼¥É¤Ø¤Î»²¾È¤ò³ÍÆÀ¤¹¤ë¡£ 9:¡¡¡¡o.h = $box.height(); // ¥¢¥Ë¥áÂоݥΡ¼¥É¤Î¹â¤µ¤ò¬Äꤹ¤ë¡£ 10:¡¡¡¡o.w = $box.width(); // ¥¢¥Ë¥áÂоݥΡ¼¥É¤ÎÉý¤ò¬Äꤹ¤ë¡£ 11:¡¡¡¡o.hideCSS = {height:"toggle",width:"toggle",top:"+="+o.h+"px"}; // ±£ÊÃ¥¢¥Ë¥áÍÑCSS 12:¡¡¡¡o.showCSS = {height:"toggle",width:"toggle",top:"-="+o.h+"px"}; // ɽ¼¨¥¢¥Ë¥áÍÑCSS 13:¡¡} ¡¡ ¡¡// duration ¥×¥í¥Ñ¥Æ¥£¤¬¤Ê¤¤¤«¡¢¤¢¤Ã¤Æ¤â°ú¿ô¤È°Û¤Ê¤ë¾ì¹ç¤Ë¤Î¤ß °ú¿ô d ¤ò o.duration ¤ËÅÐÏ¿¤¹¤ë¡£ 14:¡¡if (!o.duration || o.duration !== d) o.duration = d; ¡¡ ¡¡// easing ¥×¥í¥Ñ¥Æ¥£¤¬¤Ê¤¤¤«¡¢¤¢¤Ã¤Æ¤â°ú¿ô¤È°Û¤Ê¤ë¾ì¹ç¤Ë¤Î¤ß °ú¿ô e ¤ò o.easing ¤ËÅÐÏ¿¤¹¤ë¡£ 15:¡¡if (!o.easing || o.easing !== e) typeof o.duration ==="object" ? "" : o.easing = e; ¡¡ ¡¡// fn ¤¬Â¸ºß¤·¤Æ´Ø¿ô¤Ç complete ¥×¥í¥Ñ¥Æ¥£¤¬¤Ê¤¤¤«¡¢complete ¤¬ fn¤È°Û¤Ê¤ë¾ì¹ç ¡¡ ¡¡// fn ¤ò o.complete ¤ËÂåÆþ¤·¡¢¤½¤Î¾¤Î¾ì¹ç¤Ë¤Ï²¿¤â¤·¤Ê¤¤´Ø¿ô¤òÂåÆþ¤¹¤ë¡£ 16:¡¡o.complete = typeof o.duration ==="object" ? "" : 17:¡¡¡¡fn && $.isFunction(fn) && (!o.complete || o.complete!==fn) ? fn : function(){}; ¡¡¡¡ // stepObj ¤ÏËè²óºîÀ®¤·¤Ê¤¤¤È doStep ¤¬½é´ü²½¤µ¤ì¤Ê¤¤¡£ 18:¡¡o.stepObj =¡¡typeof o.duration ==="object" ? $.extend({},o.duration,{step:doStep}) : 19:¡¡¡¡{duration:o.duration, easing:o.easing, complete:o.complete, step:doStep}; ¡¡¡¡ // °Ê¾åËø¤ÇºîÀ®¤µ¤ì¤¿ o ¥ª¥Ö¥¸¥§¥¯¥È¤ò opts ¤ËÊ£¼Ì¤·¡¢2 ÅÙÌܰʹߤΠdrawGraph ¡¡¡¡ // ¥á¥½¥Ã¥Éµ¯Æ°»þ¤Ë o ¥ª¥Ö¥¸¥§¥¯¥È¤ÎÊ£¼Ì¸µ¤È¤¹¤ë¡£ 20:¡¡$.extend(arguments.callee.opts, o); 21: 22:¡¡function doStep(){ // step ¥á¥½¥Ã¥É¤ò»È¤Ã¤Æ¥°¥é¥Õ¤Î²£¼´ÃͤȽļ´Ãͤò¼èÆÀ¤¹¤ë 23:¡¡¡¡var e = arguments[1]; ++allsteps; // e.options.step ¤ÎÂè 2 °ú¿ô¤Ç¤¢¤ë e ¥ª¥Ö¥¸¥§¥¯¥È¤òÂåÆþ 24:¡¡¡¡if (e.prop!=="height") return; // height ¥×¥í¥Ñ¥Æ¥£°Ê³°¤Î»þ¤Ë¤Ï²¿¤â¤·¤Ê¤¤¡£ 25:¡¡¡¡++cnt ; 26:¡¡¡¡layout[cnt]={}; 27:¡¡¡¡layout[cnt]["top"] = ( 1-e.pos ) * o.h; // ¥°¥é¥Õ¤Î½Ä¼´ÃÍ¡Ê easing ´Ø¿ôÃÍ ¡Ë 28:¡¡¡¡layout[cnt]["left"] = e.state * o.w; // ¥°¥é¥Õ¤Î²£¼´ÃÍ¡Ê »þ´Ö¿ä°ÜΨ ¡Ë 29:¡¡¡¡dotAry.push(layout[cnt]); // layout ÇÛÎó¤ÎÍ×ÁǤò dptAry ÇÛÎó¤Ë³ÊǼ¤¹¤ë¡£ ¡¡¡¡¡¡ // »þ´Ö¿ä°ÜΨ¤¬ 100 ¡ó°Ê¾å¤Ë¤Ê¤Ã¤¿¤éľÀþÊä´Ö´Ø¿ô¤ò¸Æ¤Ó½Ð¤¹¡£ 30:¡¡¡¡if (e.state >= 1) arrangeGraph(); 31:¡¡} 32:¡¡function arrangeGraph(){ // ľÀþÊä´Ö´Ø¿ô 33:¡¡¡¡var len = dotAry.length; 34:¡¡¡¡while (len){ ¡¡ ¡¡¡¡¡¡// dotAry ¤ÎÀèÆ¬Í×ÁǤòºï½ü¤·¤Æ arrgAry ÇÛÎó¤Ë³ÊǼ 35:¡¡¡¡¡¡arrgAry.push(dotAry.shift());len--; ¡¡¡¡¡¡¡¡ // dotary ÇÛÎó¤Î¼¡¤ÎÍ×ÁǤÎleftÃͤȡ¢³ÊǼ¤µ¤ì¤¿¤Ð¤«¤ê¤Î dotstack ÇÛÎóÍ×ÁǤΠleft Ãͤκ¹¤ò¤È¤ê 36:¡¡¡¡¡¡if (!len) break; 37:¡¡¡¡¡¡var diffLeft = Math.round(dotAry[0].left) - Math.round(arrgAry[arrgAry.length-1].left); ¡¡ ¡¡¡¡¡¡// º¹¤¬¤Ê¤±¤ì¤ÐƱ°ìÃͤȸ«¤Ê¤·¤Æ dotary ÇÛÎó¤ÎÀèÆ¬Í×ÁǤòºï½ü 38:¡¡¡¡¡¡if (diffLeft == 0) {dotAry.shift();len--;} ¡¡¡¡¡¡¡¡ // º¹¤¬ 1 ¤Ê¤é¤Ð¼¡¤ÎÃÍ¤Ê¤Î¤Ç dotAry ÇÛÎó¤ÎÀèÆ¬Í×ÁǤòºï½ü¤·¡¢¤½¤ì¤ò arrgAry ÇÛÎó¤ËÄɲ乤ë 39:¡¡¡¡¡¡else if (diffLeft == 1) {arrgAry.push(dotAry.shift());len--;} 40:¡¡¡¡¡¡else {// º¹¤¬ 2 °Ê¾å¤¢¤ì¤Ð¡¢Êä´°ÃÍ»»½ÐÍѤˡ¢¤½¤Îº¹¤Ç top Ãͤò³ä¤Ã¤ÆÊ¿¶ÑÃͤò½Ð¤¹ 41:¡¡¡¡¡¡¡¡var avr = (dotAry[0].top - arrgAry[arrgAry.length-1].top) / diffLeft; 42:¡¡¡¡¡¡¡¡for (var j=1, obj={}; j<diffLeft ;j++){ 43:¡¡¡¡¡¡¡¡¡¡// º¹¤Î¿ô¡Ý1 ²ó¤À¤±Êä´°Ãͤò»»½Ð¤·¡¢arrgAry ÇÛÎó¤ËÄɲ乤롣 44:¡¡¡¡¡¡¡¡¡¡obj ={ 45:¡¡¡¡¡¡¡¡¡¡¡¡top: arrgAry[arrgAry.length-1].top + avr, 46:¡¡¡¡¡¡¡¡¡¡¡¡left: ++arrgAry[arrgAry.length-1].left 47:¡¡¡¡¡¡¡¡¡¡}; 48:¡¡¡¡¡¡¡¡¡¡arrgAry.push (obj); 49:¡¡¡¡¡¡¡¡} 50:¡¡¡¡¡¡} 51:¡¡¡¡} 52:¡¡¡¡plotGraph(); 53:¡¡} 54:¡¡function plotGraph(){ // ¥Ü¥Ã¥¯¥¹Æâ¤Ë¥°¥é¥Õ¤òÉÁ¤¯ 55:¡¡¡¡$box.append("<div id='selectedEasingName' style='position:absolute;top:5px;left:15px;'>"+ o.easing +"</div>"); 56:¡¡¡¡o.log.html("height prop ¤Î step µ¯Æ°²ó¿ô ¡§"+ cnt +"<br />Á´¤Æ¤Î step µ¯Æ°²ó¿ô¡§" + allsteps); 57:¡¡¡¡for (var i=0, len = arrgAry.length; i<len; i++){ 58:¡¡¡¡¡¡$("<div class='dot hack' />").css({top:arrgAry[i].top+"px",left:arrgAry[i].left+"px"}).appendTo($box); 59:¡¡¡¡} 60:¡¡} 61: 62:¡¡$box.empty(); o.log.empty(); // ɽ¼¨¤µ¤ì¤Æ¤¤¤ë easing ̾¤È log ¤ò¾Ã¤¹¡£ ¡¡ ¡¡// ±£ÊõڤÓɽ¼¨¥¢¥Ë¥á¤ò°ú¤µ¯¤³¤¹¡£É½¼¨¥¢¥Ë¥á¤Î»þ¤Ë¥°¥é¥Õ¤âÉÁ¤¯¡£ 63:¡¡return $box.animate(o.hideCSS,o.duration,o.easing ).animate(o.showCSS, o.stepObj); 64:}; 65:})(jQuery); // ¢¥ Ver 2 ½ª¤ï¤ê // ¢§ Ver 1 ¡§¥µ¥¤¥ºÂ¬Äê¤È o ¥ª¥Ö¥¸¥§¥¯¥ÈºîÀ®¤òËè²ó¹Ô¤Ã¤Æ¤¤¤ëÈó¸úΨÈÇ (function($){ $.fn.drawGraph=function(duration,easing,fn){ ¡¡var cnt=0, allsteps=0, $box=this, layout=[], dotAry=[], arrgAry=[], ¡¡¡¡¡¡o = $.extend({},{duration:duration, easing:easing}); ¡¡$box.h=$box.height(); $box.w=$box.width(); $log=$box.parent().next(); ¡¡var hideCSS = {width:"toggle",height:"toggle",top:"+="+$box.h+"px"}, ¡¡¡¡¡¡showCSS = {width:"toggle",height:"toggle",top:"-="+$box.h+"px"}; ¡¡o.step = doStep; ¡¡o.complete = function(){$.isFunction(fn) ? fn() :function(){} }; ¡¡function doStep(){ ¡¡¡¡var e = arguments[1]; ++allsteps; ¡¡¡¡if (e.prop!=="height") return; ¡¡¡¡++cnt ; ¡¡¡¡layout[cnt]={}; ¡¡¡¡layout[cnt]["top"] = ( 1-e.pos ) * $box.h; ¡¡¡¡layout[cnt]["left"] = e.state * $box.w; ¡¡¡¡dotAry.push(layout[cnt]); ¡¡¡¡if (e.state >= 1) arrangeGraph(); ¡¡} ¡¡function arrangeGraph(){ ¡¡¡¡var len = dotAry.length; ¡¡¡¡while (len){ ¡¡¡¡¡¡// dotAry¤ÎÀèÆ¬Í×ÁǤòºï½ü¤·¤Æ arrgAry ÇÛÎó¤Ë³ÊǼ ¡¡¡¡¡¡arrgAry.push(dotAry.shift());len--; ¡¡¡¡¡¡// dotary ÇÛÎó¤Î¼¡¤ÎÍ×ÁǤΠleft Ãͤȡ¢³ÊǼ¤µ¤ì¤¿¤Ð¤«¤ê¤Î dotstack ÇÛÎóÍ×ÁǤΠleft Ãͤκ¹¤ò¤È¤ê ¡¡¡¡¡¡if (!len) break; ¡¡¡¡¡¡var diffLeft = Math.round(dotAry[0].left) - Math.round(arrgAry[arrgAry.length-1].left); ¡¡¡¡¡¡// º¹¤¬¤Ê¤±¤ì¤ÐƱ°ìÃͤȸ«¤Ê¤·¤Æ dotary ÇÛÎó¤ÎÀèÆ¬Í×ÁǤòºï½ü ¡¡¡¡¡¡if (diffLeft == 0) {dotAry.shift();len--;} ¡¡¡¡¡¡// º¹¤¬ 1 ¤Ê¤é¤Ð¼¡¤ÎÃÍ¤Ê¤Î¤Ç dotAry ÇÛÎó¤ÎÀèÆ¬Í×ÁǤòºï½ü¤·¡¢¤½¤ì¤ò arrgAry ÇÛÎó¤ËÄɲä¹¤ë ¡¡¡¡¡¡else if (diffLeft == 1) {arrgAry.push(dotAry.shift());len--;} ¡¡¡¡¡¡else {// º¹¤¬ 2 °Ê¾å¤¢¤ì¤Ð¡¢Êä´°ÃÍ»»½ÐÍѤˡ¢¤½¤Îº¹¤Ç top Ãͤò³ä¤Ã¤ÆÊ¿¶ÑÃͤò½Ð¤¹ ¡¡¡¡¡¡¡¡var avr = (dotAry[0].top - arrgAry[arrgAry.length-1].top) / diffLeft; ¡¡¡¡¡¡¡¡for (var j=1, obj={}; j<diffLeft ;j++){ ¡¡¡¡¡¡¡¡¡¡// º¹¤Î¿ô - 1 ²ó¤À¤±Êä´°Ãͤò»»½Ð¤·¡¢arrgAry ÇÛÎó¤ËÄɲ乤롣 ¡¡¡¡¡¡¡¡¡¡obj ={ ¡¡¡¡¡¡¡¡¡¡¡¡top: arrgAry[arrgAry.length-1].top + avr, ¡¡¡¡¡¡¡¡¡¡¡¡left: ++arrgAry[arrgAry.length-1].left ¡¡¡¡¡¡¡¡¡¡}; ¡¡¡¡¡¡¡¡¡¡arrgAry.push (obj); ¡¡¡¡¡¡¡¡} ¡¡¡¡¡¡} ¡¡¡¡} ¡¡¡¡plotGraph(); ¡¡} ¡¡function plotGraph(){ ¡¡¡¡$box.append("<div id='selectedEasingName' style='position:absolute;top:5px;left:15px;'>"+ o.easing +"</div>"); ¡¡¡¡$log.html("height prop ¤Î step µ¯Æ°²ó¿ô ¡§"+cnt+"<br />Á´¤Æ¤Î step µ¯Æ°²ó¿ô¡§" + allsteps); ¡¡¡¡for (var i=0, len = arrgAry.length; i<len; i++){ ¡¡¡¡¡¡$("<div class='dot' />").css({top:arrgAry[i].top+"px",left:arrgAry[i].left+"px"}).appendTo($box); ¡¡¡¡} ¡¡} ¡¡$box.empty();$log.empty(); ¡¡return $box.animate(hideCSS,duration,easing ).animate(showCSS, o); };})(jQuery); // ¢¥ Ver 1 ½ª¤ï¤ê // drawGraph ¥×¥é¥°¥¤¥ó¤ò»È¤Ã¤Æ¼ÂºÝ¤Ë¥°¥é¥Õ¤ò½ñ¤«¤»¤ë¤¿¤á¤Î¥³¡¼¥É (function($){ ¡¡var selDuration=2000,selEasing="swing"; ¡¡// ¥¢¥Ë¥á·Ñ³»þ´Ö¥³¥ó¥Ü¤«¤é ÁªÂò¤µ¤ì¤¿ duration ¤ò¼èÆÀ ¡¡$("#sel1_728").change(function(){selDuration = +$(this).val();}); ¡¡// easing ¥ê¥¹¥È¤«¤é ÁªÂò¤µ¤ì¤¿ easing ´Ø¿ô¤ò¼èÆÀ ¡¡$("#sel2_728").change(function(){selEasing = $(this).val();}); ¡¡$("#btn1_728").click(function(){$("#box1_728").drawGraph(selDuration,selEasing);}); ¡¡$("input").mouseup(function(){$(this).css({backgroundColor:""}).blur();}) ¡¡¡¡.hover(function(){$(this).css({backgroundColor:"pink"});} ¡¡¡¡,function(){ ¡¡¡¡¡¡¡¡$(this).css({backgroundColor:""}); ¡¡¡¡}) ¡¡¡¡.mousedown(function(){$(this).css({backgroundColor:"lightgreen"})}); })(jQuery);
ľÁ°µ¯Æ°»þ¤ËºîÀ®¤·¤¿¥¢¥Ë¥áÂоݤ˴ؤ¹¤ë½ô¾ðÊó¤ò½ÐÍè¤ë¸Â¤ê 2 ÅÙÌܰʹߤ˳èÍѤ¹¤ë¨¡¨¡¨¡¤³¤ì¤¬ Ver 2 ºîÀ®¤Îưµ¡¤Ç¤¢¤êÌÜŪ¤Ç¤¹¡£¡Ø Javascript Âè 5 ÈÇ ¡Ùp.144 ¤ò»²¹Í¤Ë¤·¤Æ¡¢¥á¥½¥Ã¥É¤Î¥×¥í¥Ñ¥Æ¥£¤ò³èÍѤ¹¤ëÊýË¡¤òºî¤Ã¤¿¤Þ¤Ç¤ÏÎɤ«¤Ã¤¿¤Î¤Ç¤¹¤¬¡¢¤Ê¤«¤Ê¤«½çÄ´¤Ëư¤¤Þ¤»¤ó¤Ç¤·¤¿¡£18 ¹ÔÌܤΠstepObj ¤â¾¤Î¥×¥í¥Ñ¥Æ¥£¤ÈƱÍͤ˽é²óºîÀ®»þ¤ÎÃͤò»È¤¦¥³¡¼¥É¤ò½ñ¤¤¤¿¤Î¤Ç¤¹¤¬¡¢¤³¤ì¤¬íµ¤¤Î¸¶°ø¤Ç¤·¤¿¡£
14¡Á17 ¤Î 4 ¹Ô¤Ç¤Ï¡¢o.duration¡¢o.easing¡¢o.complete ¤Î³Æ¥×¥í¥Ñ¥Æ¥£¤Î¸ºß¤ò³Îǧ¤·¡¢¤½¤ì¤¬¤¢¤ì¤Ð²¿¤â¤·¤Ê¤¤¤è¤¦¤Ê¥³¡¼¥É¤ò½ñ¤¤Þ¤·¤¿¡£¤³¤¦¤·¤Æ¥³¡¼¥É¿Ê¹Ô¤Î¸úΨ²½¤ò¿Þ¤Ã¤¿¤Î¤Ç¤·¤¿¡£
¤½¤·¤Æ¤½¤ì¼«ÂΤÏÌäÂê¤Ê¤¯Æ°¤¤¤¿¤Î¤Ç¡¢°Â¿´¤·¤Æ 18 ¹Ô¤â if (o.stepObj) ʸ¤ò½ñ¤¤¤Æ¤·¤Þ¤Ã¤¿¤Î¤Ç¤¹¡£
¤È¤³¤í¤¬¡¢¤³¤¦¤¹¤ë¤È 2 ÅÙÌܰʹߤˤª¤¤¤Æ¤Ï o.stepObj ¤ÏºÆÄêµÁ¤µ¤ì¤Ê¤¤¤Î¤Ç¡¢½é²ó»þ¤ÎÃͤò¤½¤Î¤Þ¤ÞÊÝ»ý¤·Â³¤±¤Æ¤·¤Þ¤¤¤Þ¤¹¡£¤½¤Î·ë²Ì 3 ¹ÔÌܤΠcnt = 0 ¤¬ 2 ÅÙÌÜ°Ê¹ß¤ËÆÉ¤ß¹þ¤Þ¤ì½é´ü²½¤µ¤ì¤Æ¤â¡¢¤½¤Î¸å¤Î²áÄø¤Ç opts ¥×¥í¥Ñ¥Æ¥£¤Ë o ¥ª¥Ö¥¸¥§¥¯¥È¤òÊ£¼Ì¡¦ÂÔÈò¤µ¤»¤Æ¤¤¤ë¤¿¤á¡¢o.stepObj Æâ¤Î cnt ¤Ï½é´ü²½¤µ¤ì¤ºÎßÀѤµ¤ì¤Æ¤·¤Þ¤¦¤Î¤Ç¤¹¡£
¤½¤Î¤³¤È¤¬Ê¬¤«¤ë¤Þ¤Ç¤Ë¿ô»þ´Ö¤òÍפ·¤¿¤Î¤Ç¤¹¤¬¡¢Â礤ÊÍî¤È¤··ê¤ËÍî¤Á¹þ¤ó¤Ç¤·¤Þ¤Ã¤¿·ë²Ì¡¢µ®½Å¤Ê·Ð¸³¤ò½Å¤Í¤ë¤³¤È¤¬½ÐÍè¤Þ¤·¤¿¡£
¤³¤ì¤Þ¤Ç 9 ²ó¤ËÏˤäƥ¨¥ó¥È¥ê¥¤¤·¤Æ¤¤¿¥¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥É¤Î²òÆÉ¤òƧ¤Þ¤¨¤Æ¡¢º£Å٤ϥ¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥É¤ò³èÍѤ·¤¿¡¢¼ÂÎã¤ò·ÇºÜ¤·¤Æ¤ß¤è¤¦¤È»×¤¤¤Þ¤¹¡£
¤³¤Á¤é¤Ï¶ìÏ«¤ÎËö¤ä¤Ã¤ÈºîÀ®¤ò´°Î»¤·¡¢¤³¤Î¥¨¥ó¥È¥ê¥¤¤Î²¼¤ÎÊý¤Ë¤½¤Î¼ÂÎã¤È¥³¡¼¥É¤ò·ÇºÜ¤·¤Þ¤·¤¿¡£
¤³¤Î¥×¥é¥°¥¤¥ó¥á¥½¥Ã¥É¤Ï¡¢Ã¼Åª¤Ë¸À¤Ã¤Æ slideToggle() ¥á¥½¥Ã¥É¤Î³ÈÄ¥ÈǤǤ¹¡£
jquery.js ¤Ë¼ý¤á¤é¤ì¤Æ¤¤¤ë slideToggle() ¤Ï slideDown() ¤È slideUp() ¥á¥½¥Ã¥É¤ò¸ò¸ß¤Ë¼Â¹Ô¤¹¤ëÀÚ¤êÂØ¤¨¥á¥½¥Ã¥É¤Ç¡¢¥Ü¥Ã¥¯¥¹Îΰè¤Îɽ¼¨¤È±£Êäò¾åÊÕ¤ò´ðÅÀ¤È¤·¤ÆÀÚ¤êÂØ¤¨¤ëºîÍѤòµ¯¤³¤·¤Þ¤¹¡£
º£²óºîÀ®¤·¤¿ slideToggleEx() ¥á¥½¥Ã¥É¤Ï¡¢slideToggle() ¤¬É½¼¨/±£Êäò¾åÊÕ¤À¤±¤«¤é¹Ô¤¦¤Î¤ËÂФ·¤Æ¡¢°Ê²¼¤Î¤è¤¦¤ËÍÍ¡¹¤Ê²Õ½ê¤«¤éɽ¼¨¤µ¤ì¡¢±£Ê䵤ì¤ë¤è¤¦¤Ë¡¢ÂçÉý¤Ëµ¡Ç½³ÈÄ¥¤·¤¿¤â¤Î¤Ç¤¹¡£
slideToggleEx() ¥á¥½¥Ã¥É¤Ï¡¢¥Ü¥Ã¥¯¥¹¤Î (0) Ãæ¿´¡¢(1) º¸¾å¡¢(2) ±¦¾å¡¢(3) ±¦²¼¡¢(4) º¸²¼¡¢(5) ¾åÊÕ¡¢(6) ±¦ÊÕ¡¢(7) ²¼ÊÕµÚ¤Ó (8) º¸ÊդΡ¢Á´Éô¤Ç 9 ¤Ä¤Î¥¢¥Ë¥áµ¯½ªÅÀ¤ËÂбþ¤µ¤»¤¿¡¢¥Ü¥Ã¥¯¥¹¤Î½Ì¾®±£Êà / Ÿ³«É½¼¨¤ò¹Ô¤¦¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ç¤¹¡£
µ¯½ªÅÀ¤Ï´Êñ¤Ë°ú¿ô¤À¤±¤Ç»ØÄê½ÐÍè¤ë¤è¤¦¤Ë¹©Éפ·¡¢¹¹¤Ë¡¢Æ±°ì¥Ü¥¿¥ó¤Î¥¯¥ê¥Ã¥¯¤Ë¤è¤ë¡¢°¿¤ëµ¯½ªÅÀ¤«¤é¤Î±£ÊÃ/ɽ¼¨¥¢¥Ë¥á¡¼¥·¥ç¥ó¤À¤±¤Ç¤Ê¤¯¡¢ÍÍ¡¹¤Êµ¯½ªÅÀ¤«¤é¤Î¥¢¥Ë¥á¤ò¡¢Ï¢Â³¤·¤Æµ¯Æ°¤·¤Ê¤¬¤é¡¢±£ÊÃ/ɽ¼¨¤ò·«¤êÊÖ¤¹Ï¢Â³¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ë¤âÂбþ¤µ¤»¤¿¡¢¤Þ¤µ¤·¤¯µ¡Ç½³ÈÄ¥ÈǤǤ¹¡£
¤³¤ì¤Ï¥Ü¥Ã¥¯¥¹¤Î¥µ¥¤¥º¤òÂ礤¯¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¹Ô¤Ê¤ï¤»¤Ê¤¬¤é step ¥á¥½¥Ã¥É¤ò³èÍѤ·¡¢¤½¤Î»þ¤Ë»ÈÍѤ·¤Æ¤¤¤ë easing ´Ø¿ô¤ÎÃͤò¡¢Åö³º¥Ü¥Ã¥¯¥¹¤ÎÃæ¤Ë¥°¥é¥Õ¤È¤·¤Æ¼¨¤¹¤â¤Î¤Ç¤¹¡£¥°¥é¥Õ¤ò¥¢¥Ë¥á¡¼¥·¥ç¥óµ¡Ç½¤ò»È¤Ã¤ÆÉÁ¤¯¤È¤¤¤¦»î¤ß¤Ë¥Á¥ã¥ì¥ó¥¸¤·¤Æ¤ß¤Þ¤¹¡£
¼Â¤Ï¼¡¤Î¥¨¥ó¥È¥ê¥¤¤Ë¤½¤Î¥°¥é¥ÕÉÁ²è¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò·ÇºÜ¤·¤Þ¤·¤¿¡£
¤³¤Á¤é¤Ï¤Þ¤À̤Ãå¼ê¤Ç¤¹¡£cycle ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¤è¤¦¤Ë¡¢²èÁü¤â°ì½ï¤Ë³ÈÂç½Ì¾®¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òºî¤ëͽÄê¤Ç¤¹¡£
¤Ê¤ª¤³¤Î¥á¥½¥Ã¥É¤Ï¡¢¤³¤ì¤Þ¤Ç¤Î¤è¤¦¤Ëɽ¼¨¤µ¤ì¤Æ¤¤¤ë¥³¥ó¥Æ¥ó¥Ä¤ò¥¢¥Ë¥á¡¼¥È¤¹¤ë¤Î¤Ç¤Ï¤Ê¤¯¡¢Èóɽ¼¨¤¢¤ë¤¤¤Ï¸ºß¤·¤Æ¤¤¤Ê¤«¤Ã¤¿¤â¤Î¤ò¥¢¥Ë¥á¡¼¥È¤Ç½Ð¸½¤µ¤»¤ë¥¿¥¤¥×¤Ë¤Ê¤ë¤Ï¤º¤Ç¤¹¡£
²¿¤Ï¤È¤â¤¢¤ì¡¢·ë²Ì¤ò¤ªÈäϪÌܤ·¤Þ¤¹¡£
ÅöÁ³¤Î¤³¤È¤Ç¤¹¤¬¡¢ slideToggleEx() ¥á¥½¥Ã¥É¤Ï¥×¥é¥°¥¤¥ó·Á¼°¡¢¤Ä¤Þ¤ê¡¢jQuery ¥×¥í¥È¥¿¥¤¥×¥ª¥Ö¥¸¥§¥¯¥È¤È¤·¤ÆºîÀ®¤·¤Þ¤·¤¿¡£¤³¤¦¤¹¤ì¤Ð»È¤¤¾¡¼ê¤¬¤è¤ê°ìÁØÈÆÍÑŪ¤Ë¤Ê¤ë¤«¤é¤Ç¤¹¡£
¾å¤Î ¡Ö slideToggleEx() °ìµ¤Íú¹Ô ¡× ¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È¡¢¡Ö ¥Ü¥Ã¥¯¥¹¤ò½ªÅÀ¤Ë±£Êä·¡¢¤½¤³¤ò»ÏÅÀ¤È¤·¤ÆÅ¸³«¤¹¤ë 18 ¤ÎϢ³¥¢¥Ë¥á¡¼¥·¥ç¥ó ¡× ¤¬»Ï¤Þ¤ê¤Þ¤¹¡£
¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ï¡¢¥Ü¥Ã¥¯¥¹¤Î (0) Ãæ¿´¡¢(1) º¸¾å¡¢(2) ±¦¾å¡¢(3) ±¦²¼¡¢(4) º¸²¼¡¢(5) ¾åÊÕ¡¢(6) ±¦ÊÕ¡¢(7) ²¼ÊÕµÚ¤Ó (8) º¸ÊդΠ9 ¤Ä¤ÎÅÀ¤Þ¤¿¤ÏÊÕ¤ò¤³¤Î½çÈ֤˵¯½ªÅÀ/Àþ¤È¤·¡¢ ÊĤ¸¤Æ³«¤¯ 2 ²ó ¡ß 9 ¼ïÎà¡¢¤Ä¤Þ¤ê 18 ²óϢ³¤·¤Æµ¯Æ°¤µ¤ì¤Þ¤¹¡£¤³¤Î¥¢¥Ë¥á¤Ç¤Ï¤½¤ì¤¾¤ì¤Î¥¢¥Ë¥á·Ñ³»þ´Ö¤ÏÁ´¤Æ 1 ÉäȤ·¡¢easing ´Ø¿ô¤ÏÁ´¤ÆÆ±°ì¤Î¡¢²º¤ä¤«¤Ê swing ¤ò»È¤¤¤Þ¤·¤¿¡£
¤Ê¤ª¡¢¤³¤ÎϢ³µ¯Æ°¥¢¥Ë¥á¤â¡¢¾å¤ÇÀâÌÀ¤¹¤ë 3 ¤Ä¤Î¸ÄÊ̵¯Æ°¥¢¥Ë¥á¤âÁ´¤Æ¡¢¾å¤ÎÇö²«¿§Ãϥܥ寥¹¤ÎÃæ¤Ë¤¢¤ë¡¢ ÀÄÃ϶⿧¥Ü¡¼¥À¡¼¤Î¥Ü¥Ã¥¯¥¹¤òÂоݤȤ·¤Æºîư¤·¤Þ¤¹¡£¤Þ¤¿Æ°¤¯¥Ü¥Ã¥¯¥¹¤Î¸µ¤Î°ÌÃÖ¤¬Ê¬¤«¤ë¤è¤¦¤Ë¡¢¥¢¥Ë¥áÂоݥܥ寥¹¤òÊñ¤ß¹þ¤àÉÔÆ°¤ÎÇØ·Ê¥Ü¥Ã¥¯¥¹¡ÊÇØ·Ê¿§¥Ö¥é¥¦¥ó¡Ë¤òÇÛÃÖ¤·¤Æ¤¢¤ê¤Þ¤¹¡£¤³¤ì¤Ë¤è¤ê margin ¤ò´Þ¤á¤Æ¥¢¥Ë¥áÂоݤˤʤäƤ¤¤ë¤³¤È¤¬»ë³ÐŪ¤Ë¤â³Îǧ¤Ç¤¤ë¤Ï¤º¤Ç¤¹¡£
(1) µ¯½ªÅÀ¤¬¥Ü¥Ã¥¯¥¹Ãæ¿´¡¢(2) µ¯½ªÀþ¤¬º¸ÊÕ¡¢(3) µ¯½ªÅÀ¤¬±¦²¼¶ù ¨¡¨¡ ¤Î 3 ¤Ä¤ò¾å¤ËÍѰդ·¤Þ¤·¤¿¡£
¤³¤ì¤é¤Ï¤½¤ì¤¾¤ì¤ËñÆÈ¤Çºîư¤·¡¢1 ²óÌܤΥܥ¿¥ó¥¯¥ê¥Ã¥¯¤Ç±£ÊÃ¥¢¥Ë¥á¤¬¡¢Æ±°ì¥Ü¥¿¥ó¤Î2 ²óÌܤΥ¯¥ê¥Ã¥¯¤Çɽ¼¨¥¢¥Ë¥á¤¬¡¢¤½¤ì¤¾¤ìµ¯Æ°¤·¤Þ¤¹¡£¥¢¥Ë¥á·Ñ³»þ´Ö¤ÏÁ´¤Æ 2 ÉäËÀßÄꤷ¤Þ¤·¤¿¡£
¤³¤³¤Ç easing ´Ø¿ô¤È IE ¤Î´Ø·¸¤Ë¤Ä¤¤¤Æ°ì¸ÀÉÕ¸À¤·¤Æ¤ª¤¤Þ¤¹¡£¾å¤ÎñÆÈµ¯Æ°¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ë¤ÏÁ´¤Æ IE ¤Çư¤¯¤³¤È¤ò³Îǧ¤·¤¿¡¢¤½¤ì¤¾¤ì°Û¤Ê¤ë easing ´Ø¿ô¤ò»ÈÍѤ·¤Æ¤¤¤Þ¤¹¡£
Ãͤ¬ 0 ¤ò²¼²ó¤ë¤«¡¢1 ¤ò±Û¤¨¤ë¤è¤¦¤Ê easing ´Ø¿ô¤ò»ØÄꤹ¤ë¤È¡¢Firefox ¤Ç¤ÏÌäÂê¤Ê¤¯Æ°¤¯¤Î¤Ç¤¹¤¬¡¢IE ¤Î¾ì¹ç¸Ç¤Þ¤Ã¤Æ¤·¤Þ¤¤¤Þ¤¹¡£»È¤Ã¤Æ¤¤¤ë easing ´Ø¿ô¥»¥Ã¥È¤Ï¡¢ºÇ¤âÍ̾¤È»×¤ï¤ì¤ë¥ª¡¼¥½¥É¥Ã¥¯¥¹¤Ê jQuery Easing Plugin (version 1.3) ¤Ê¤Î¤Ç¡¢´Ø¿ô»ØÄê¤ËÌäÂ꤬¤¢¤ë¤È¤Ï»×¤¨¤Þ¤»¤ó¡£
¤É¤¦¤·¤Æ IE ¤Ç¤Ïư¤«¤Ê¤¤¤Î¤«²òÌÀ½ÐÍ褺¡¢¤³¤Î¤¿¤á¤Ë¾å¤Î¥µ¥ó¥×¥ë¤Ç¤Ï¡¢´Ø¿ôÃͤ¬ 0 ¡Á 1 ¤Ë¼ý¤Þ¤ë¤è¤¦¤Ê easing ´Ø¿ô¤òÁª¤ó¤Ç»ØÄꤷ¤Þ¤·¤¿¡£
¢£ slideToggleEx() ¤Î»ÅÍÍ ¡¡½ñ¼°¡§ slideToggleEx ( type, duration, easing, function ) ¡¡type¡§ 0¡ÝÃæ¿´¡¢1¡Ýº¸¾åü¡¢2¡Ý±¦¾åü¡¢3¡Ý±¦²¼Ã¼¡¢4¡Ýº¸²¼Ã¼¡¢ ¡¡¡¡¡¡¡¡ 5¡Ý¾åÊÕ¡¢6¡Ý±¦ÊÕ¡¢7¡Ý²¼ÊÕ¡¢8¡Ýº¸ÊÕ ¡¡¡¡¡¡¡¡¡¡ ¨¡¨¡¨¡¡¡¤³¤Î¿ôÃͤǥ¢¥Ë¥áµ¯½ªÅÀ°ÌÃÖ¤ò»ØÄꤷ¤Þ¤¹¡£ ¡¡duration¡¨ ¥¢¥Ë¥á·Ñ³»þ´Ö¡Ê¥ß¥êÉÃñ°Ì¡¢¤Þ¤¿¤Ï "slow","fast"¡£ ¡¡¡¡¡¡¡¡¡¡¡¡ ̵»ØÄê¤Î¾ì¹ç jquery.js ¤Î»ÅÍͤˤè¤ê 400 ¥ß¥êÉäȤʤê¤Þ¤¹¡£¡Ë ¡¡¡¡¡¡¡¡¡¡¡¡ ¤Ê¤ª¡¢¥ª¥Ö¥¸¥§¥¯¥È·Á¼°¤Ç¤³¤ÎÂè 2 °ú¿ô¤ò»ØÄꤹ¤ë¤³¤È¤â²Äǽ¤Ç¤¹¡£ ¡¡easing¡§ easing ´Ø¿ô¡Êʸ»úÎó¤Ç»ØÄꤷ¤Þ¤¹¡£Ìµ»ØÄê¤Î¾ì¹ç ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡jquery.js ¤Î»ÅÍͤˤè¤ê swing ¤¬Å¬ÍѤµ¤ì¤Þ¤¹¡Ë ¡¡function¡§ ¥¢¥Ë¥á½ªÎ»¸å¤Ëµ¯Æ°¤¹¤ë´Ø¿ô¤ò»ØÄꤷ¤Þ¤¹¡ÊÉÔÍפʤé¤Ð̵»ØÄê¡Ë ¡¡ ¡¡¢¨ Âè 2 °ú¿ô¤ò¥ª¥Ö¥¸¥§¥¯¥È·Á¼°¤Ç»ØÄꤹ¤ë¾ì¹ç¤Ë¤Ï¡¢Âè 3¡¢Âè 4 °ú¿ô¤Ï»ØÄꤷ¤Þ¤»¤ó¡£
¥¢¥Ë¥á¤Î°ÌÃÖ»ØÄê¤òÀäÂлØÄê¤Ë¤¹¤ë¤«¡¢ÁêÂлØÄê¤È¤¹¤ë¤«¡¢ºÇ½é¤ÏǺ¤ß¤Þ¤·¤¿¡£¤½¤·¤Æ¤½¤ÎÀ§Èó¤òȽÃǤ¹¤ë¤¿¤á¤Ë¡¢Î¾Êý¤òºîÀ®¤·¤¿¾å¤Ç¡¢¤³¤³¤Ë¤ÏÁêÂлØÄêÈǤò·ÇºÜ¤·¤Þ¤·¤¿¡£ÁêÂлØÄê¤ÎÊý¤¬¥³¡¼¥É¤ò¤Ñ¤Ã¤È¸«¤ÆÊ¬¤«¤ê¤ä¤¹¤¤¤ÈȽÃǤ·¤¿¤¿¤á¤Ç¤¹¡£
¥¢¥Ë¥á¤Î°ÌÃÖ»ØÄê¤òÀäÂлØÄêÊý¼°¤Ç¹Ô¤¦¾ì¹ç¤Ë¤Ï¡¢¥¢¥Ë¥áÂоݤò¥é¥Ã¥×¤¹¤ë¥Ü¥Ã¥¯¥¹¤¬°ÌÃÖ»ØÄê¤Î´ð½àºÂɸ¤È¤Ê¤ë¤¿¤á¡¢»ØÄê¾å¤ÎÍÆ°×À¤ò¹Íθ¤¹¤ë¤È¥¢¥Ë¥á¥Ü¥Ã¥¯¥¹¤Î¥Þ¡¼¥¸¥óÊÕ¤ÈÆ±¤¸¥µ¥¤¥º¤Î ¡Ö ´ð½à¥Ü¥Ã¥¯¥¹ ¡× ¤òºî¤é¤Í¤Ð¤Ê¤ê¤Þ¤»¤ó¡£
¥¢¥Ë¥á°ÌÃÖ¤òÁêÂаÌÃ֤ǻØÄꤹ¤ì¤Ð¡¢¤³¤Î¤è¤¦¤Ê´ð½àºÂɸ¥Ü¥Ã¥¯¥¹¤ÎɬÍ×À¤Ï¤Ê¤¤¤Î¤Ç¡¢¤½¤Î°ÕÌ£¤«¤é¤âÁêÂлØÄêÊý¼°¤ÎÊý¤¬ÍøÊØÀ¤¬¤è¤¤¤È»×¤ï¤ì¤Þ¤¹¡£
Åö½é¤Ï¥¢¥Ë¥áÂоݤΠCSS ¤Ë position:relative ¤ò»ØÄꤷ¤Æ¤¤¤Þ¤·¤¿¤¬¡¢slideToggleEx ¥×¥é¥°¥¤¥ó¤Î±¿ÍѤò½Å¤Í¤ë¤ËÏ¢¤ì¡¢¤½¤ÎÅÔÅÙ»ØÄꤹ¤ë¤³¤È¤¬ÌÌÅݤǤ¢¤ë¤³¤È¤Ëµ¤¤¬¤Ä¤¤Þ¤·¤¿¡£
slideToggleEx ¥×¥é¥°¥¤¥ó¥á¥½¥Ã¥É¤Ï top ¤È left ¤ò¥¢¥Ë¥áÂоݤȤ·¤Æ¤¤¤Þ¤¹¤Î¤Ç¡¢¥¢¥Ë¥áÂÐ¾Ý¤Ë¤Ï static °Ê³°¤Î position »ØÄ꤬°Ù¤µ¤ì¤Æ¤¤¤Ê¤±¤ì¤Ð¤Ê¤ê¤Þ¤»¤ó¡£¤·¤«¤·¡¢¤½¤ì¤ò°ì¡¹ÂоÝÍ×ÁǤ˻ØÄꤹ¤ë¤Î¤Ï·ë¹½ÌÌÅݤǤ¹¡£
¤³¤Î¤¿¤á¡¢²¾¤Ë¥¢¥Ë¥áÂÐ¾Ý¤Ë position »ØÄ꤬°Ù¤µ¤ì¤Æ¤¤¤Ê¤¤¾ì¹ç¤Ç¤âÁêÂлØÄê¤È¤Ê¤ë¤è¤¦¡¢Javascript ¥³¡¼¥É¤Ë¤è¤Ã¤Æ¶¯À©Åª¤Ë»ØÄꤹ¤ë¤³¤È¤Ë¤·¤Þ¤·¤¿¡£
jquery.js ¤Ç¤Ï outerWidth(true)¡¢outerHeight(true) ¤È»ØÄꤹ¤ë¤È margin ÊÕËø¤Î¥Ü¥Ã¥¯¥¹¥µ¥¤¥º¤ò·×¬¤¹¤ë»ÅÍͤˤʤäƤ¤¤Þ¤¹¡£¡Ê#4342 ¡Á 4346¡Ë
¤È¤³¤í¤¬¡¢Èó°µ½ÌÈǤΠjquery.js ¤Ë¤ª¤¤¤Æ¤Ï¤½¤ÎÄ̤굡ǽ¤¹¤ë¤Î¤Ç¤¹¤¬¡¢packed ÈǤǤϤ½¤Î¥³¡¼¥É¤ò¥Á¥§¥Ã¥¯¤·¤Æ¤â´Ö°ã¤Ã¤Æ¤Ï¤¤¤Ê¤¤¤È»×¤ï¤ì¤ë¤Î¤Ç¤¹¤¬¡¢¹ª¤¯ºîư¤»¤º¥Ü¡¼¥À¡¼ÊÕËø¤ÎºÎÀ£¤·¤«¤·¤Æ¤¯¤ì¤Þ¤»¤ó¤Ç¤·¤¿¡£
¤³¤³¤Ç¤Ï margin ÊդޤǤγ°À£¤¬Íߤ·¤«¤Ã¤¿¤Î¤Ç¤ä¤à¤òÆÀ¤º¡¢outerWidth¡¢outerHeight ¤Ë¤Ï°ú¿ô true ¤òÉÕ¤±¤º¤Ë¡¢¥Ü¡¼¥À¡¼ÊդޤǤΥµ¥¤¥º¤ò¼èÆÀ¤·¤Æ¤ª¤¡¢¤½¤ì¤Ë margin ¥µ¥¤¥º¤òÄɲä·¤Æ margin ÊդޤǤκÎÀ£¤ò¹Ô¤ï¤¶¤ë¤òÆÀ¤Þ¤»¤ó¤Ç¤·¤¿¡£
¥³¡¼¥É¤Ê¤É¤òɽ¼¨¤·¤¿¤ê±£Êä·¤¿¤ê¤¹¤ë¥Ü¥¿¥ó¤Ï¡¢½¾Í褫¤é slideToggle ¥á¥½¥Ã¥É¤ò»Å¹þ¤ó¤Ç¤¤¤Þ¤·¤¿¡£
¤½¤·¤Æº£²ó¡¢ÅöÁ³¤Ç¤¹¤¬¡¢¤½¤Î¥Ü¥¿¥ó¤Ë¤Ï slideToggle ¤Ç¤Ï¤Ê¤¯ slideToggleEx ¤ò»Å¹þ¤ß¤Þ¤·¤¿¡£
ÁᮼÂÍѤ˶¡¤·¤¿¤ï¤±¤Ç¤¹¤¬¡¢»È¤¦¾å¤Ç¤ÎÃí°ÕÅÀ¤òÎóµó¤·¤Æ¤ª¤¤Þ¤¹¡£
ɽ¼¨¡¿±£ÊÃÂоݤȤʤëÍ×ÁÇ¥¿¥°¤¬¡¢½Ä¤Þ¤¿¤Ï²£¤Ë¥¹¥¯¥í¡¼¥ë¥Ð¡¼¤¬¤¢¤ë¾ì¹ç¡¢¤½¤ÎÍ×ÁǤò±£Êøå¤Ëɽ¼¨¤µ¤»¤¿¾ì¹ç¡¢¥¹¥¯¥í¡¼¥ë¥Ð¡¼¤ÎÉý¤ä¹â¤µÊ¬¤À¤±¡¢º¸¤Ë¥¤¥ó¥Ç¥ó¥È¤¬³Ý¤Ã¤Æ¤·¤Þ¤Ã¤¿¤ê¡¢²¼¤¬¶õ¤¤¤Æ¤·¤Þ¤Ã¤¿¤ê¤·¤Þ¤¹¡£
¤³¤ì¤Ï jquery.js ¤Ë¤ª¤±¤ë ¥¢¥Ë¥á»þ¤Î overflow ¥×¥í¥Ñ¥Æ¥£¤Î°·¤¤¤Ëµ¯°ø¤¹¤ë¤È»×¤ï¤ì¤Þ¤¹¤¬¡¢³ÎÄêŪ¤Ê¤³¤È¤ÏÄ´ºº¤·ÀÚ¤ì¤Æ¤¤¤Þ¤»¤ó¡£
½¾¤Ã¤Æ¡¢ÆÃ¤Ë½Ä¥¹¥¯¥í¡¼¥ë¥Ð¡¼¤¬¤¢¤ëÍ×ÁǤò slideToggleEx ÂоݤȤ¹¤ë¾ì¹ç¤Ë¤Ï¡¢¥Ü¥Ã¥¯¥¹¤Î±¦¤Î 2 ¤Ä¤ÎüÉô¤ä±¦ÊÕ¤òµ¯½ªÅÀ/Àþ¤Ë¤·¤Ê¤¤¤è¤¦¤Ë¤¹¤ë¤«¡¢¤¢¤ë¤¤¤Ï¥Ü¥Ã¥¯¥¹Éý¤òÌÀ¼¨Åª¤Ë»ØÄꤹ¤ë¤³¤È¤¬¸ÌÀ¤Ç¤¹¡£
IE ¤Ç¤Ï¥Ü¥Ã¥¯¥¹¤Î±¦Â¦¤òµ¯½ªÅÀ¤È¤¹¤ë¥¢¥Ë¥á¤Ï¹ª¤¯ºîư¤·¤Þ¤»¤ó¡£¥¹¥¯¥ê¥×¥È¤¬¸Ç¤Þ¤Ã¤Æ¤·¤Þ¤¤¤Þ¤¹¡£
¤³¤Î¤¿¤á±¦¾åü¡¢±¦ÊÕµÚ¤Ó±¦²¼Ã¼¤Î 3 ¤Ä¤Îµ¯½ªÅÀ¤ò»ØÄꤷ¤¿¾ì¹ç¤Ë¤Ï¡¢IE ¤À¤±¤Ï¡¢º¸¾åü¡¢º¸ÊÕµÚ¤Óº¸²¼Ã¼¤¬»ØÄꤵ¤ì¤¿¤â¤Î¤ÈÆÉ¤ßÂØ¤¨¤ë¤è¤¦¡¢¥³¡¼¥É¤ò²þÊѤ·¤Þ¤·¤¿¡£
ľ²¼¤Î¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È¡¢¾å¤Î¥¢¥Ë¥á¼ÂÎã¤òµ¯Æ°¤µ¤»¤ë»ØÄêÆâÍÆ¤¬É½¼¨¤µ¤ì¤Þ¤¹¤¬¡¢¤³¤Î¥Ü¥¿¥ó¤Ë¤Ï No 5 ¤Î slideToggleEx ¡¢¤Ä¤Þ¤ê¾åÊÕ¤«¤é¤Î¥¹¥é¥¤¥É¥À¥¦¥ó/¥¢¥Ã¥×¤ò»Å¹þ¤ß¤Þ¤·¤¿¡£ÉÔÆ©ÌÀÅ٤⥢¥Ë¥áÂоݤˤ·¤Æ¤¤¤ë¤Î¤Ç¡¢slideToggle ¤è¤ê¤â¤è¤ê°õ¾ÝŪ¤Ë¤Ê¤Ã¤Æ¤¤¤ë¡¢¤È»×¤¤¤Þ¤¹¡£¤Ê¤ª¡¢¸ú²Ì¤ò³Îǧ¤¹¤ë¤¿¤á¤Ë¤â´ö¤Ä¤«¤Î¥¢¥Ë¥á¤Ï»þ´Ö¤ò 1 Éóݤ±¤ë¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£
¢£¾å¤Ç¼¨¤·¤¿¼ÂÎã¤Î slideToggleEx() »ØÄêÆâÍÆ
<script type="text/javascript">//<!--
$(function(){
¡¡// 18 ¥¢¥Ë¥áϢ³µ¯Æ°
¡¡$.box = $("#box1_727");
¡¡$("#btn1_727").click(function(){
¡¡¡¡$box
¡¡¡¡¡¡.slideToggleEx(0,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(0,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(1,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(1,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(2,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(2,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(3,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(3,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(4,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(4,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(5,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(5,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(6,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(6,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(7,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(7,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(8,1000,"swing")
¡¡¡¡¡¡.slideToggleEx(8,1000,"swing",function(){alert("18 ¤ÎϢ³¥¢¥Ë¥á¤¬´°Î»¤·¤Þ¤·¤¿")});
¡¡});
¡¡// µ¯½ªÅÀ¤ò¥Ü¥Ã¥¯¥¹Ãæ¿´¤È¤¹¤ë¥¢¥Ë¥áµ¯Æ°
¡¡$("#btn2_727").click(
¡¡¡¡function(){
¡¡$box.slideToggleEx(0,1000,"easeInOutQuint");
}
¡¡);
¡¡// µ¯½ªÀþ¤ò¥Ü¥Ã¥¯¥¹º¸ÊդȤ¹¤ë¥¢¥Ë¥áµ¯Æ°
¡¡$("#btn3_727").click(
¡¡¡¡function(){
¡¡$box.slideToggleEx(8,1000,"easeInOutSine");
}
¡¡);
¡¡// µ¯½ªÅÀ¤ò¥Ü¥Ã¥¯¥¹±¦²¼Ã¼¤È¤¹¤ë¥¢¥Ë¥áµ¯Æ°
¡¡$("#btn4_727").click(
¡¡¡¡function(){
¡¡$box.slideToggleEx(3,1000,"easeInOutQuart");
}
¡¡);
¡¡// ¥Ü¥¿¥ó
¡¡$("button")
¡¡¡¡.mousedown(function(){$(this).css({backgroundColor:"lightgreen"})})
¡¡¡¡.mouseup(function(){$(this).blur().css({backgroundColor:""})})
¡¡¡¡.hover(function(){
¡¡¡¡¡¡¡¡$(this).css({backgroundColor:"pink"});
¡¡¡¡¡¡},function(){
¡¡¡¡¡¡¡¡$(this).css({backgroundColor:""});
¡¡¡¡})
¡¡¡¡.blur();
// regist click Event to fire slideToggleEx() for nextBox
// button ¤Î¼¡¤Ë¤¢¤ë¥Ö¥í¥Ã¥¯¤ò slideToggleEx ¤ÎÁàºîÂоݤȤ¹¤ë¤¿¤á¤Î°ìÈÌŪ¥³¡¼¥É
var duration=1000, easing=null,fn=function(){}, clk={};
function func(i){
$.each(clk[i],function(){
var $target={};
$target[i] = $(this).css("display")=="block" ? $(this).next() : $(this).parent().next();
if ($target[i].length) {
$(this).click(function(){
if (jQuery.browser.msie)
var k = i==2 && 1 || i==3 && 4 || i==6 && 8 || i;
else k = i;
$target[i].slideToggleEx(k, duration, easing, fn);
$(this).blur();
});
}
});
}
for (var i=0; i<9; i++){
clk[i] = $(".fireSlideToggleEx-" + i);
if (!clk[i].length) continue;
func(i);
clk[i].hover(
function(){$(this).css({backgroundColor:"pink"})},
function(){$(this).css({backgroundColor:""})}
)
.mousedown(function(){$(this).css('background-color','palegreen')})
}
});
//--></script>
ľ²¼¤Î¥Ü¥¿¥ó¤Ë¤Ï No 2 ¤Î slideToggleEx ¡¢¤Ä¤Þ¤ê±¦¾åüÉô¤«¤é¤Î¥¹¥é¥¤¥É¥À¥¦¥ó/¥¢¥Ã¥×¤ò»Å¹þ¤ß¤Þ¤·¤¿¡£ºÇ½é¤Ï½Ä¥¹¥¯¥í¡¼¥ë¥Ð¡¼¤¬¤Ê¤¤¤Î¤Ç¡¢±¦¾åüÉô¤«¤é¤Îµ¯½ªÅÀ¤â´Êñ¤Ë¼Â¹Ô¤Ç¤¤ë¤È»×¤¤¤Þ¤·¤¿¤¬¡¢Éý¤òÌÀ¼¨Åª¤Ë»ØÄꤷ¤Æ½é¤á¤Æ»×¤¤Ä̤ê¤Ëºîư¤·¤Þ¤·¤¿¡£
⤷¡¢¤Þ¤¿¤·¤Æ¤â IE ¤Ç¾ã³²¤¬½Ð¤Þ¤·¤¿¡£±¦¾åüÉô¤Ø¤Î±£Ê䬵¯Æ°¤»¤º¡¢²¿¸Î¤«¥¹¥¯¥í¡¼¥ë¥Ð¡¼¤¬¾Ã¤¨¤Æ¤·¤Þ¤¦¤À¤±¤Ç¾¤Ë¤Ï²¿¤âµ¯¤³¤ê¤Þ¤»¤ó¤Ç¤·¤¿¡£»ÅÊý¤Ê¤¯ IE ¤Î¾ì¹ç¤Î¤ß No1 ¤Ä¤Þ¤êº¸¾åüÉô¤òµ¯½ªÅÀ¤È¤¹¤ë¤è¤¦¤Ë¥³¡¼¥Ç¥£¥ó¥°¤·Ä¾¤·¤Þ¤·¤¿¡£
¢£ ¥¹¥¿¥¤¥ë¥·¡¼¥È
<style type="text/css"><!--
¡¡#animArea_727 {
¡¡¡¡position :relative; z-index:1; margin:1em auto; top:0px;left:0px;font-size:16px;color:black;
¡¡¡¡width:650px;height:300px;background-color:cornsilk;border:dotted 2px goldenrod;
¡¡}
¡¡#animArea_727 > div {
¡¡¡¡position: absolute; z-index:2; top:50px; left: 170px;
¡¡¡¡width:336px; height:186px; background-color:brown;
¡¡}
¡¡#box1_727 { /* ´º¤¨¤Æ position »ØÄê¤Ï¹Ô¤Ã¤Æ¤¤¤Þ¤»¤ó¡£*/
¡¡¡¡margin:10px 10px 10px 10px;width:300px; height:150px;
¡¡¡¡background-color:royalblue; border:ridge 8px palegoldenrod;
¡¡}
¡¡button {overflow:visible;padding:2px;}
--></style>
ľ²¼¤Î¥Ü¥¿¥ó¤Ë¤Ï No 7 ¤Î slideToggleEx ¡¢¤Ä¤Þ¤ê²¼ÊÕ¤«¤é¤Î¥¹¥é¥¤¥É¥¢¥Ã¥×¡Ê ɽ¼¨¤¹¤ë¾ì¹ç ¡Ë/¥À¥¦¥ó¡Ê ±£Ê乤ë¾ì¹ç ¡Ë¤ò»Å¹þ¤ß¤Þ¤·¤¿¡£¥¹¥é¥¤¥É¤¬²¼¤«¤é»Ï¤Þ¤ë¤ÈÆÈÆÃ¤ÎÊ·°Ïµ¤¤Ë¤Ê¤ê¤Þ¤¹¡£
¢£¥×¥é¥°¥¤¥ó slideToggleEx() ¥á¥½¥Ã¥É¥³¡¼¥É <script type="text/javascript">//<!-- // top ¤È left ¤ò¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤Ë¤¹¤ë position relative ¥Ð¡¼¥¸¥ç¥ó (function($){ // jQuery plugin : slideToggleEx() Release at 2009.8.21, verup 2009.9.9 var ver="not absolute but relative animation on position relative"; $.fn.slideToggleEx = function( type, duration, easing, fn ){ ¡¡var $target=this; ¡¡var o = $.extend({},$.fn.slideToggleEx.opts); ¡¡// ½é¤á¤Æ¤½¤Î¥¤¥ó¥¹¥¿¥ó¥¹¤«¤é¸Æ¤Ð¤ì¤¿¤«¡¢¥¤¥ó¥¹¥¿¥ó¥¹¤¬ÊѤï¤Ã¤¿¾ì¹ç¤Î¤ß ¡¡if(!o.target || o.target[0]!==$target[0]) { ¡¡¡¡$.extend(o,{ ¡¡¡¡¡¡orig : o, // backup ¤·¤Æ¤ª¤¯ ¡¡¡¡¡¡target : $target, // µ¯Æ°¥¤¥ó¥¹¥¿¥ó¥¹¤òµÏ¿¤¹¤ë ¡¡¡¡¡¡oH : $target.outerHeight() + parseInt($target.css("margin-top")) ¡¡¡¡¡¡¡¡+ parseInt($target.css("margin-bottom")), // ¥¤¥ó¥¹¥¿¥ó¥¹¤ÎÂè°ìÍ×ÁǤΠmargin ÊÕËø¤Î¹â¤µ¤ò¬¤ë ¡¡¡¡¡¡oW : $target.outerWidth() + parseInt($target.css("margin-left")) ¡¡¡¡¡¡¡¡+ parseInt($target.css("margin-right")), // ¥¤¥ó¥¹¥¿¥ó¥¹¤ÎÂè°ìÍ×ÁǤΠmargin ÊÕËø¤ÎÉý¤ò¬¤ë ¡¡¡¡¡¡odd : false ¡¡¡¡}); ¡¡¡¡// opts ¥ª¥Ö¥¸¥§¥¯¥È¤Ë¾å¤ÇÆÀ¤¿ o ¥ª¥Ö¥¸¥§¥¯¥È¤òÊ»¹ç¤·¡¢Ex ¥á¥½¥Ã¥É¤¬½ª¤ï¤Ã¤Æ¤â¾ðÊó¤òÊݸ¤¹¤ë ¡¡¡¡$.extend($.fn.slideToggleEx.opts,o); ¡¡¡¡// ¥¤¥ó¥¹¥¿¥ó¥¹¤ÎÍ×ÁǤΠposition »ØÄê¤ò³Îǧ¤·¡¢É¬ÍפʻØÄê¤ò¹Ô¤¦¡£ ¡¡¡¡if ($target.css("position") ==="static") $target.css({position:"relative",top:"0",left:"0"}); ¡¡} ¡¡// µ¯Æ°²ó¿ô¤¬¶ö¿ô¤«´ñ¿ô¤«¤òµÏ¿¤¹¤ë¡£Ï¢Â³µ¯Æ°¤ÎºÝ¤Ë¤Ï¤³¤ì¤Ë¤è¤Ã¤Æ hide ¥á¥½¥Ã¥É¤òµ¯Æ°¤¹¤ë¤Î¤«¡¢ ¡¡// show¥á¥½¥Ã¥É¤òµ¯Æ°¤¹¤ë¤Î¤«¤òȽÃǤ¹¤ë¡£ ¡¡o.odd = $.fn.slideToggleEx.opts.odd = !$.fn.slideToggleEx.opts.odd; ¡¡o.hidden = $target.is(":hidden"); // Í×ÁǤ¬±£¤ì¤Æ¤¤¤ë¤«¤É¤¦¤«È½Äꤹ¤ë ¡¡o.duration = duration || o.duration; // duration ¤¬ ¥ª¥Ö¥¸¥§¥¯¥È¤Î¾ì¹ç¤â´Þ¤á¤ÆÂбþ ¡¡// °Ê²¼¤Î 2 ¤Ä¤Ï¡¢duration ¤¬¥ª¥Ö¥¸¥§¥¯¥È¤Î»þ¤Ë¤Ï¶õʸ»ú¤òÂåÆþ¤¹¤ë¡£ ¡¡o.easing = typeof duration !=="object" ? (easing || o.easing) : ""; ¡¡o.complete = typeof duration !=="object" ? ($.isFunction(fn) && fn || o.complete) : ""; ¡¡function makeAnimCSS(type,showhide){ // ¥¢¥Ë¥áCSS¥×¥í¥Ñ¥Æ¥£¤òºîÀ®¤¹¤ë´Ø¿ô ¡¡¡¡var type = new Number(type); ¡¡¡¡var plmn = showhide ? "-=" : "+="; // showhide == true ¢ª "-=" ¡¡¡¡return type==0 ? {top: plmn + o.oH/2 +"px", left: plmn + o.oW/2 +"px"} : // center ¡¡¡¡type==1 ? {top: plmn + 0, left: plmn + 0} : // º¸¾åü ¡¡¡¡type==2 ? {top: plmn + 0, left: plmn + o.oW +"px"} : // ±¦¾åü ¡¡¡¡type==3 ? {top: plmn + o.oH +"px", left: plmn + o.oW +"px"} : // ±¦²¼Ã¼ ¡¡¡¡type==4 ? {top: plmn + o.oH +"px", left: plmn + 0} : // º¸²¼Ã¼ ¡¡¡¡type==5 ? {top: plmn + 0, left: plmn + 0} : // ¾åÊÕ ¡¡¡¡type==6 ? {top: plmn + 0, left: plmn + o.oW +"px"} :// ±¦ÊÕ ¡¡¡¡type==7 ? {top: plmn + o.oH +"px", left: plmn + 0} :// ²¼ÊÕ ¡¡¡¡type==8 ? {top: plmn + 0, left:plmn + 0} : {top:plmn + 0, left:plmn + 0} ;// º¸ÊÕ ¡¡} ¡¡if (new Number(type) > 8) // ¥¨¥é¡¼ÂÐ½è ¡¡¡¡(function(){ ¡¡¡¡¡¡alert("Âè 1 °ú¿ô¤Ï 0¡Á8 ¤À¤±¤¬»ØÄê¤Ç¤¤Þ¤¹¡£\n¤ä¤êľ¤·¤Æ¤¯¤À¤µ¤¤¡£\n"+"slideToggleEx( 0¡Á8, ·Ñ³»þ´Ö, easing´Ø¿ô )"); return; ¡¡¡¡})(); ¡¡else { ¡¡¡¡var obj = (!o.odd || o.hidden) ¡¡¡¡¡¡? makeAnimCSS(type,true) // ¶ö¿ô²óÌܤε¯Æ°¤«¡¢¤Þ¤¿¤ÏÍ×ÁǤ¬±£Êäµ¤ì¤Æ¤¤¤ë»þ¤Î CSS ºîÀ® ¡¡¡¡¡¡: makeAnimCSS(type,false); // ´ñ¿ô²óÌܤε¯Æ°¤«¡¢Í×ÁǤ¬É½¼¨¤µ¤ì¤Æ¤¤¤ë»þ¤Î CSS ºîÀ® ¡¡¡¡$.extend( obj, // top ¤È left ¤À¤±¤ÎCSS¥ª¥Ö¥¸¥§¥¯¥È¤ËÉý¤È¹â¤µ´Ø·¸ÃͤâÄɲà ¡¡¡¡ ¡¡( type==5 || type==7 ) ? {} : o.animWidth, // ¾åÊÕ¤«²¼Êդλþ¤Ë¤ÏÉýÊý¸þCSS¤ÏÂоݳ° ¡¡ ¡¡¡¡( type==6 || type==8 ) ? {} : o.animHeight, // ±¦ÊÕ¤«º¸Êդλþ¤Ë¤Ï¹â¤µÊý¸þCSS¤ÏÂоݳ° ¡¡¡¡ ¡¡{opacity:"toggle"} ); // Æ©ÌÀÅ٤⥢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤È¤¹¤ë ¡¡¡¡return this.animate(obj, o.duration, o.easing, o.complete); // ¥¢¥Ë¥áµ¯Æ° ¡¡} }; // End of $.fn.slideToggleEx // default ÃÍÀßÄê¤Èµ²±ÍÑ¥×¥í¥Ñ¥Æ¥£¤È¤·¤Æ¤Îµ¡Ç½¤Î¤¿¤á¤Ë $.fn.slideToggleEx.opts = { ¡¡duration:1000, easing:null, complete:function(){}, ¡¡animHeight : { ¡¡¡¡height:"toggle", marginTop:"toggle", marginBottom:"toggle", paddigTop:"toggle", ¡¡¡¡paddingBottom:"toggle", borderTopWidth:"toggle", borderBottomWidth:"toggle" ¡¡}, animWidth : { ¡¡¡¡width:"toggle", marginLeft:"toggle", marginRight:"toggle", paddigLeft:"toggle", ¡¡¡¡paddingRight:"toggle", borderLeftWidth:"toggle", borderRightWidth:"toggle" ¡¡} }; })(jQuery); //--></script>
¤³¤ì¤Þ¤Ç 8 ²ó¤ËÏË¤Ã¤Æ jquery.js ¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥É¤ò²òÆÉ¤·¤Æ¤¤Þ¤·¤¿¡£¼«¤é¤ÎÍý²ò¤ò¿¼¤á¤ë¤¿¤á¤Ë¡¢¤Þ¤¿±ÜÍ÷¼Ô¤Ë¤è¤ê´Ø¿´¤òÊú¤¤¤ÆÂפ¯¤¿¤á¤Ë¤â¡¢¤¤¤¯¤Ä¤«¤Î¥µ¥ó¥×¥ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤âºîÀ®¤·¡¢¤½¤Î²òÀâ¤â¤ª¤³¤Ê¤Ã¤Æ¤¤Þ¤·¤¿¡£
¤½¤·¤Æ¤Ä¤¤¤Ë¡¢¤³¤Î¥¨¥ó¥È¥ê¥¤¤ò¤â¤Ã¤Æ jquery.js ¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥É¤ÎÁ´¤Æ¤Î²òÆÉ¤ò½ª¤¨¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£´û¤Ë¹â¤¤»³¤ÏÅФ꽪¤¨¤Æ¤¤¤ë¤Î¤Ç¡¢»Ä¤µ¤ì¤¿¥á¥½¥Ã¥É¤ÏÈæ³ÓŪ´Êñ¤Ê¤â¤Î¤Ð¤«¤ê¤Ç¤¹¡£
°ú¿ô¡§speed¡¢callback
ÊÖÃÍ¡§jQuery¥¤¥ó¥¹¥¿¥ó¥¹
µ¡Ç½¡§Í×ÁǤÎÉý¤ò°ìÄê¤ËÊݤÁ¤Ä¤Ä¡¢¹â¤µ¤ò 0 ¤«¤é½ù¡¹¤Ë½êÄê¤Î¹â¤µ¤Þ¤ÇÊѲ½¤µ¤»¤Ê¤¬¤éÍ×ÁǤòɽ¼¨¤·¤Þ¤¹¡£
Âè 1 °ú¿ô¤Ë¹â¤µ¤Ë´Ø¤ï¤ë³Æ¼ï¤Î CSS ¥×¥í¥Ñ¥Æ¥£ÃͤòÁ´¤Æ "show" ¤ËÀßÄꤷ¤¿ CSS ¥ª¥Ö¥¸¥§¥¯¥È¤ò¡¢Âè 2 °ú¿ô¤Ë speed ¤ò¡¢Âè 3 °ú¿ô¤Ë callback ¤òÀßÄꤷ¤Æ¡¢animate ¥á¥½¥Ã¥É¤òµ¯Æ°¤·¡¢¤½¤ÎÊÖÃͤòÊÖ¤·¤Þ¤¹¡£
¤³¤Î¥á¥½¥Ã¥É¤Ï¶ñÂÎŪ¤Ë¤Ï¼¡¤Î¤è¤¦¤ËÄêµÁ¤µ¤ì¤Þ¤¹¡£
jQuery.fn.slideDown = function(speed,callback){
¡¡¡¡return this.animate({
¡¡¡¡¡¡height:"show", marginTop:"show", marginBottom:"show",
¡¡¡¡¡¡paddingTop:"show", paddingBottom:"show"
¡¡},speed,callback)
} //¡Ê#3954¡Á3964¤è¤ê¡Ë
slideDown ¥á¥½¥Ã¥É¤Î¥³¡¼¥É¿Ê¹Ô¤ò¶ñÂÎŪ¤ËÀ×ÉÕ¤±¤ë¤È¼¡¤Î¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£
°ú¿ô¡§speed¡¢callback
ÊÖÃÍ¡§jQuery¥¤¥ó¥¹¥¿¥ó¥¹
µ¡Ç½¡§Í×ÁǤÎÉý¤ò°ìÄê¤ËÊݤÁ¤Ä¤Ä¡¢¹â¤µ¤ò½êÄê¤Î¹â¤µ¤«¤é 0 ¤Þ¤ÇÊѲ½¤µ¤»¤Ê¤¬¤éÍ×ÁǤò±£Êä·¤Þ¤¹¡£
¤³¤Î¥á¥½¥Ã¥É¤Ï¶ñÂÎŪ¤Ë¤Ï¼¡¤Î¤è¤¦¤ËÄêµÁ¤µ¤ì¤Þ¤¹¡£
jQuery.fn.slideUp = function(speed,callback){
¡¡¡¡return this.animate({
¡¡¡¡¡¡height:"hide", marginTop:"hide", marginBottom:"hide",
¡¡¡¡¡¡paddingTop:"hide", paddingBottom:"hide" ¡¡},speed,callback)
} //¡Ê#3954¡Á3964¤è¤ê¡Ë
¤³¤Î¥á¥½¥Ã¥É¤Ï¡¢¹â¤µ¤Ë´Ø¤ï¤ë³Æ¼ï¤Î CSS ¥×¥í¥Ñ¥Æ¥£ÃͤòÁ´¤Æ "hide" ¤ËÀßÄꤷ¤¿CSS¥ª¥Ö¥¸¥§¥¯¥È¤òÂ裱°ú¿ô¤Ë¡¢speed ¤òÂ裲°ú¿ô¤Ë¡¢¤½¤·¤Æ callback ¤òÂ裳°ú¿ô¤Ë¤·¤Æ animate ¥á¥½¥Ã¥É¤òµ¯Æ°¤·¡¢¤½¤ÎÊÖÃͤòÊÖ¤·¤Þ¤¹¡£¸À¤¦¤Þ¤Ç¤â¤Ê¤¯¡¢jQuery().slideDown() ¥á¥½¥Ã¥É¤ÎµÕ¤Î¤³¤È¤ò¹Ô¤¦¥á¥½¥Ã¥É¤Ç¤¹¡£
e.hide() ¤òµ¯Æ°¤¹¤ë¤³¤È¤Ë¤è¤ê¡¢¹â¤µ¤Ë·¸¤ë³Æ¼ï CSS ¥¹¥¿¥¤¥ë¥×¥í¥Ñ¥Æ¥£¤Î¥«¥ì¥ó¥È¥¹¥¿¥¤¥ëÃͤò½é´üÃͤò¤È¤·¡¢ºÇ½ªÃͤò¥¼¥í¤ËÀßÄꤷ¤Æ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¹Ô¤¤¤Þ¤¹¡£
¶ñÂÎŪ¤Ê¥³¡¼¥É¿Ê¹Ô¤Ï slideDown ¤È¹ó»÷¤·¤Þ¤¹¤¬¡¢e.show()¥á¥½¥Ã¥É¤è¤ê¤â¡¢e.hide()¥á¥½¥Ã¥É¤ÎÊý¤¬¡¢¤Þ¤¿ show()¥¤¥ó¥¹¥¿¥ó¥¹¥á¥½¥Ã¥É¤è¤ê¤â hide() ¥¤¥ó¥¹¥¿¥ó¥¹¥á¥½¥Ã¥É¤ÎÊý¤¬¡¢¶¦¤Ë¥³¡¼¥Éʸ»ú¿ô¤Ï¾¯¤Ê¤¯¡¢Ã±¤Ê¤ëÂоÈŪ¤Ê´Ø·¸¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¡£
°ú¿ô¡§speed¡¢callback
ÊÖÃÍ¡§jQuery¥¤¥ó¥¹¥¿¥ó¥¹
µ¡Ç½¡§e.show() Ëô¤Ï e.hide() ¥á¥½¥Ã¥É¤ò¸ò¸ß¤Ëµ¯Æ°¤¹¤ë¥á¥½¥Ã¥É¤Ç¤¹¡£ÂоݤȤ·¤¿¥¿¥°Í×ÁǤ¬É½¼¨¤µ¤ì¤Æ¤¤¤ì¤Ð e.hide()¥á¥½¥Ã¥É¤òµ¯Æ°¤·¤Æ±£Êä·¡¢±£Êäµ¤ì¤Æ¤¤¤ì¤Ð e.show() ¥á¥½¥Ã¥É¤òµ¯Æ°¤·¤ÆÉ½¼¨¤·¤Þ¤¹¡£
°ú¿ô¡§speed¡¢callback
ÊÖÃÍ¡§jQuery¥¤¥ó¥¹¥¿¥ó¥¹
µ¡Ç½¡§CSS ¥ª¥Ö¥¸¥§¥¯¥È {opacity:"show"} ¤òÂ裱°ú¿ô¤Ë¡¢speed ¤òÂ裲°ú¿ô¤Ë¡¢callback ¤òÂ裳°ú¿ô¤Ë¤·¤Æ animate ¥á¥½¥Ã¥É¤òµ¯Æ°¤·¡¢¤½¤ÎÊÖÃͤòÊÖ¤·¤Þ¤¹¡£¤³¤ì¤Ë¤è¤êÍ×ÁǤ¬Æ©ÌÀ¤«¤é¼¡Âè¤ËÉÔÆ©ÌÀ¤Ë¤Ê¤Ã¤Æ¤¤¤Ã¤Æ¡¢É½¼¨¤µ¤ì¤ë¥¢¥Ë¥á¤¬¼Â¸½¤µ¤ì¤Þ¤¹¡£
¤³¤Î¥á¥½¥Ã¥É¤Ï¶ñÂÎŪ¤Ë¤Ï¼¡¤Î¤è¤¦¤ËÄêµÁ¤µ¤ì¤Þ¤¹¡£
jQuery.fn.fadeIn = function(speed,callback){
¡¡¡¡return this.animate({opacity:"show"},speed,callback)
}
°ú¿ô¡§speed¡¢callback
ÊÖÃÍ¡§jQuery¥¤¥ó¥¹¥¿¥ó¥¹
µ¡Ç½¡§fadeIn ¥á¥½¥Ã¥É¤È¤Î°ã¤¤¤Ï animate ¥á¥½¥Ã¥ÉÂè 1 °ú¿ô¤Î opacity ¥×¥í¥Ñ¥Æ¥£Ãͤ¬ hide ¤Ë¤Ê¤ë¤³¤È¤À¤±¤Ç¤¹¡£¤³¤ì¤Ë¤è¤êÍ×ÁǤ¬ÉÔÆ©ÌÀ¤«¤é¼¡Âè¤ËÆ©ÌÀ²½¤·¤Æ¤¤¤ºÇ¸å¤Ë¤Ï´°Á´Æ©ÌÀ¤Ë¤Ê¤Ã¤Æ¡¢É½¼¨¤¬¾Ã¤¨¤Þ¤¹¡£
¤³¤Î¥á¥½¥Ã¥É¤Ï¶ñÂÎŪ¤Ë¤Ï¼¡¤Î¤è¤¦¤ËÄêµÁ¤µ¤ì¤Þ¤¹¡£
jQuery.fn.fadeIn = function(speed,callback){
¡¡¡¡return this.animate({opacity:"hide"},speed,callback)
}
°ú¿ô¡§2 ¤Ä¤Î°ú¿ô¤Ï¶¦¤Ë boolean ·¿¡£ºÇ½é¤Î°ú¿ô¤ò true ¤ËÀßÄꤹ¤ë¤È¡¢¥¢¥Ë¥áÂÔ¤Á¹ÔÎóÇÛÎó¤ò¶õ¤Ë¤¹¤ë¤³¤È¤Ë¤è¤Ã¤Æ¡¢¼¡°Ê¹ß¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë¥¢¥Ë¥á¤òÁ´¤ÆÅÐÏ¿¤«¤éºï½ü¤·¤Þ¤¹¡£2 ÈÖÌܤΰú¿ô¤ò true ¤Ë»ØÄꤹ¤ë¤È¡¢Á´¤Æ¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎÁ´¤Æ¤Î step ¥á¥½¥Ã¥É¤ò³ÊǼ¤·¤Æ¤¤¤ë jQuey.timers ÇÛÎ󤫤顢º£¤Þ¤µ¤Ë¥¢¥Ë¥á¤òÄä»ß¤·¤è¤¦¤È¤·¤Æ¤¤¤ë¥¿¥°Í×ÁǤ˴ؤï¤ë step ¥á¥½¥Ã¥É¤òÆÃÄꤷ¡¢Åö³ºÍ×ÁǤÎÅö³º¥¢¥Ë¥á¤ò¡¢¤½¤Î step ¥á¥½¥Ã¥É¤òºÇ¸å¤Ë½ªÎ»¤µ¤»¤Þ¤¹¡£
ÊÖÃÍ¡§jQuery ¥¤¥ó¥¹¥¿¥ó¥¹
µ¡Ç½¡§¤³¤Î¥á¥½¥Ã¥É¤ÏÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òºï½ü¤·¤¿¤ê¡¢¿Ê¹ÔÃæ¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òÄä»ß¤µ¤»¤Þ¤¹¡£
°ú¿ô¤Ë²¿¤â»ØÄꤷ¤Ê¤¤¤È¡¢Ã±¤Ë¸½ºßư¤¤¤Æ¤¤¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òÄä»ß¤µ¤»¤Þ¤¹¡£Æ±¤¸Í×ÁǤËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë¼¡¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÏÄä»ß¤µ¤ì¤Þ¤»¤ó¤·¡¢Ää»ß»Ø¼¨¤ÎÁ°¤Î»þÅÀ¤Çư¤½Ð¤·¤Æ¤¤¤ÆÌ¤¤À½ª¤ï¤Ã¤Æ¤¤¤Ê¤¤ e.step ¥á¥½¥Ã¥É¤âÄä»ß¤µ¤ì¤Þ¤»¤ó¡£
3927:¡¡stop: function(clearQueue, gotoEnd){
3928:¡¡¡¡var timers = jQuery.timers;
3929:
3930:¡¡¡¡if (clearQueue) // clearQueue ¤¬ true ¤Ê¤é¤Ð
3931:¡¡¡¡¡¡this.queue([]); // ¶õÇÛÎó¤ò queue ¥á¥½¥Ã¥É¤Î°ú¿ô¤È¤·¤Æ¡¢ÂÔ¤Á¹ÔÎó¤ò¶õ¤Ë¤·
3932:¡¡¡¡¡¡// jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òºï½ü¤¹¤ë¡£
3933:¡¡¡¡this.each(function(){ // ¥¤¥ó¥¹¥¿¥ó¥¹¤ÎÍ×ÁÇËè¤Ë½ä²ó½èÍý
3934:¡¡¡¡¡¡// go in reverse order so anything added to the queue during the loop is ignored
3935:¡¡¡¡¡¡for ( var i = timers.length - 1; i >= 0; i-- )
¡¡¡¡¡¡¡¡¡¡¡¡ // timers ÇÛÎó¤ÎÍ×ÁÇ¤Ï custom ¥á¥½¥Ã¥ÉÆâ¤Î #4046 ¹Ô¤ÇÄêµÁ¤µ¤ì¤Æ¤¤¤ë
¡¡¡¡¡¡¡¡¡¡¡¡ // t ´Ø¿ô¤Ç¤¢¤ê¡¢¤³¤ì¤Ï e.step ¥á¥½¥Ã¥É¤òµ¯Æ°¤µ¤»¥¢¥Ë¥á¤ò¹ï¤àÌò³ä¤ò²Ì¤¿¤¹¡£
¡¡¡¡¡¡¡¡¡¡¡¡ // ¤³¤Î´Ø¿ô¤Ë¤Ï animate ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤¿Á´¤Æ¤Î¥¿¥°Í×ÁǤΡ¢Á´¤Æ¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î
¡¡¡¡¡¡¡¡¡¡¡¡ // ³Æ CSS ¥×¥í¥Ñ¥Æ¥£Ëè¤Î e.step ¥á¥½¥Ã¥É¤¬ÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë¡£
¡¡¡¡¡¡¡¡¡¡¡¡ // ¤½¤ì¤òµÕ½ç¤Ë½ä²óÁöºº¤·¤Æ¡¢¤½¤ì¤¬¸½ºßÂоݤȤ·¤Æ¤¤¤ëÍ×ÁǤΥ᥽¥Ã¥É¤À¤Ã¤¿¤é
3936:¡¡¡¡¡¡¡¡if ( timers[i].elem == this ) {
3937:¡¡¡¡¡¡¡¡¡¡if (gotoEnd) // gotoEnd ¤¬ true ¤Ë»ØÄꤵ¤ì¤Æ¤¤¤ì¤Ð
3938:¡¡¡¡¡¡¡¡¡¡¡¡// force the next step to be the last
3939:¡¡¡¡¡¡¡¡¡¡¡¡timers[i](true); // ¼¡¤Ëµ¯Æ°¤¹¤ë e.step ¥á¥½¥Ã¥É¤òºÇ¸å¤Ë¤½¤Î¥¢¥Ë¥á¤ò½ª¤ï¤ë¡£
3940:¡¡¡¡¡¡¡¡¡¡timers.splice(i, 1); // timers ÇÛÎó¤Î i ÈÖÌܤòºï½ü¡£¼Â¹ÔÃæ¤Î e.step ¥á¥½¥Ã¥É¤òºï½ü¤¹¤ë¡£
3941:¡¡¡¡¡¡¡¡}
3942:¡¡¡¡}); // ½ä²ó½èÍý½ª¤ï¤ê
3943:
3944:¡¡¡¡// start the next in the queue if the last step wasn't forced
¡¡¡¡¡¡¡¡ // gotoEnd ¤¬ ̤ÄêµÁ¤« false ¤Ê¤é¤ÐÅö³ºÍ×ÁǤËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë¼¡¤Î¥¢¥Ë¥á´Ø¿ô¤ò¼Â¹Ô¤¹¤ë¡£
3945:¡¡¡¡if (!gotoEnd)
3946:¡¡¡¡¡¡this.dequeue();
3947:
3948:¡¡¡¡return this;
3949:¡¡}
°ú¿ô¡§easing ´Ø¿ô̾¤òʸ»úÎó·Á¼°¤Ç»ØÄꤷ¤Þ¤¹
ÊÖÃÍ¡§easing ´Ø¿ô¤Ë¤è¤ë»º½ÐÃÍ
µ¡Ç½¡§½é´üÃÍ¡¢¥¢¥Ë¥á·Ñ³»þ´Ö¡¢·Ð²á»þ´Ö¤Ê¤É¤«¤é·×»»¤¬¹Ô¤ï¤ì¤Þ¤¹¤¬¡¢Ã±½ã¤Ë¸À¤¨¤Ð¡¢ÍÍ¡¹¤ÊÂå¿ô¼°¤Ë¡¢·Ð²á»þ´Ö³ä¹ç¡Ê ¤³¤Î³ä¹ç¤Î¤³¤È¤ò¡Ö ưºî¥¹¥Æ¡¼¥¿¥¹ ¡×¤È¤¤¤¦¤é¤·¤¤ ¡Ë¤òÊÑ¿ô¤È¤·¤ÆÂåÆþ¤·¤ÆÃͤ¬»»½Ð¤µ¤ì¤Þ¤¹¡£
α°Õ¤¹¤Ù¤ÅÀ¤Ï¡¢·Ð²á¤·¤¿»þ´Ö¤½¤Î¤â¤Î¤Ç¤Ï¤Ê¤¯¡¢¤½¤Î¥¢¥Ë¥á·Ñ³»þ´Ö¤ËÂФ¹¤ë¤½¤Î³ä¹ç¤¬ÊÑ¿ô¤È¤Ê¤ë¤³¤È¤Ç¤·¤ç¤¦¤«¡£
¤Ê¤ª°ÊÁ°¤Ë¤â¾Ò²ð¤·¤Þ¤·¤¿¤¬¡¢ easing ´Ø¿ô¤Î¶Ë¤á¤ÆÊ¬¤«¤ê¤ä¤¹¤¤Î㼨¤È¤·¤Æ¡¢°Ê²¼¤Î¥µ¥¤¥È¤¬Èó¾ï¤Ë»²¹Í¤Ë¤Ê¤ê¤Þ¤¹¡£¡Ö¤½¤Î Easing ¤Î³Æ¡¹¤Îư¤¤Î°ã¤¤¤ò¼¨¤·¤¿¥µ¥¤¥È¤È¤·¤Æ¶½Ì£¿¼¤¤¤Î¤Ï¡¢flash ¥à¡¼¥Ó¡¼¤Ç¤¹¤¬¡¢ easing_demo ¤¬¼Â¤Ëʬ¤«¤ê¤ä¤¹¤¯Í±×¤Ç¤¹¡£¤³¤ì¤Ë¤è¤ê¤½¤ì¤¾¤ì¤Î Easing ¤¬¤É¤ó¤Êµóư¤ò¤¹¤ë¤Î¤«°ìÌÜÎÆÁ³¤ËÍý²ò¤Ç¤¤Þ¤¹¡£easing ´Ø¿ôÆâ¤ÎÂå¿ô¼°¤¬¥°¥é¥Õ²½¤µ¤ì¤Æ¤¤¤ë¤³¤È¤âÈó¾ï¤ËͱפǤ¹¡£¡×( jQuery ¥×¥é¥°¥¤¥ó¤È¤·¤Æ¥¢¥Ë¥á¡¼¥·¥ç¥ó¥Ý¥Ã¥×¥¢¥Ã¥× ¡§ animatedPopup ¤ò¼«ºî¤·¤¿¡£ )
¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç¤ÏÁ°¥¨¥ó¥È¥ê¥¤¤Ë³¤¤¤Æ¥µ¥ó¥×¥ë¤ò·ÇºÜ¤·¤Þ¤¹¡£º£²ó¤Î¥µ¥ó¥×¥ë¤Ç¤Ï Web ¥µ¥¤¥È¤Ç¤Ï;¤ê¸«¤«¤±¤Ê¤¤¡Ö ¥¢¥Ë¥á¡Ý¥·¥ç¥ó¤¬¿Ê¹Ô¤·¤Æ¤¤¤ë¤½¤ÎÅÓÃæ¤Î¾ðÊó ¡×¤ò¼è¤ê¾å¤²¤Þ¤¹¡£
¤³¤ì¤Þ¤Ç¤Î ¡Ö jquery.js ¤Ë¤ª¤±¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥É¤Î²òÆÉ (1) ¡Á (6) ¡× ¤«¤é¤âʬ¤«¤ë¤È¤ª¤ê¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬¼Â¸½¤µ¤ì¤ë¥³¡¼¥É¤Î¿Ê¹Ô²áÄø¤ÏÂçÊÑÊ£»¨¤Ç¡¢ÍÍ¡¹¤Ê¥×¥í¥Ñ¥Æ¥£¤È¥á¥½¥Ã¥É¤¬¶î»È¤µ¤ì¤Æ ¡Ö ư¤ ¡× ¤¬±é½Ð¤µ¤ì¤Æ¤¤¤Þ¤¹¡£
¤½¤·¤Æ¥¢¥Ë¥á¤ò°·¤Ã¤¿¥µ¥¤¥È¤Î¿¤¯¤Ï¡¢¥¢¥Ë¥á¤½¤Î¤â¤Î¿ÍÍÀ¡¦ÆÈ¼«À¡¦¥æ¥Ë¡¼¥¯¤µ¤ò¶¥¤¤¹ç¤Ã¤Æ¤¤¤Æ¤â¡¢¥¢¥Ë¥á¡Ý¥·¥ç¥ó¿Ê¹Ô²áÄø¤Ë¤ª¤±¤ë¾ðÊó¤ò²Ä»ë²½¤·¤¿¤â¤Î¤Ï;¤ê¸«¼õ¤±¤Þ¤»¤ó¡£
¤½¤³¤Ç¡¢¼ÂºÝ¤Ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òµ¯¤³¤·¤Ê¤¬¤é¡¢¤½¤Î¿Ê¹Ô²áÄø¤Ë¤ª¤±¤ë½ô¾ðÊó¤ò¼è¤ê¤À¤¹¥µ¥ó¥×¥ë¤òºî¤Ã¤Æ¤ß¤Þ¤·¤¿¡£
¤½¤ì¤Ï¤º¤Ð¤ê jQuery.fx ¥³¥ó¥¹¥È¥é¥¯¥¿¤Î e ¥¤¥ó¥¹¥¿¥ó¥¹¤¬ÊÝ»ý¤·¤Æ¤¤¤ë¾ðÊó¤Ç¤¹¡£
e ¥¤¥ó¥¹¥¿¥ó¥¹¤Ï´û¤Ë¸«¤¿¤è¤¦¤ËÌϼ°¿ÞŪ¤Ë¼¨¤»¤Ð°Ê²¼¤Î¤è¤¦¤ÊÀ¹¤ê¤À¤¯¤µ¤ó¤Î¾ðÊó¤òÆâÊñ¤·¤Æ¤¤¤Þ¤¹¡£
¢£ jQuery.fx ¥³¥ó¥¹¥È¥é¥¯¥¿¤Î e ¥¤¥ó¥¹¥¿¥ó¥¹
e = {
¡¡elem¡§elem,// Âè 1 °ú¿ô
¡¡prop:propName, // Âè 3 °ú¿ô
¡¡options: {
¡¡¡¡queue:false || true, step:function(){¡¦¡¦¡¦}, // ¤³¤ì¤é¤Ï¥æ¡¼¥¶¡¼¤¬»ØÄꤹ¤ë¡£
¡¡¡¡old,complete,easing,duration,display,overflow,// animate¥á¥½¥Ã¥É¤«¤é°ú¤·Ñ¤¬¤ì¤ë¡£
¡¡¡¡curAnim, //animate¥á¥½¥Ã¥É¤ÎÂè°ì°ú¿ô¤Ç¤¢¤ë prop ¥ª¥Ö¥¸¥§¥¯¥È¤¬³ÊǼ¤µ¤ì¤ë¡£
¡¡¡¡orig:{prop},
¡¡¡¡show:true || false || undefined, hide:true || false || undefined
¡¡},
¡¡startTime, start, end, unit, now, pos, state,
¡¡// ¥á¥½¥Ã¥É
¡¡cur(), custuom(), step(), update(), show(), hide()
}
¢£ jQuery.fx ¥³¥ó¥¹¥È¥é¥¯¥¿¤Î¥¯¥é¥¹¥×¥í¥Ñ¥Æ¥£
jQuery.fx.speeds = {"slow":600, "fast":200, _default:400}
jQuery.fx.step = {opacity, _default}
¡Ö ¥¢¥Ë¥á¿Ê¹Ô²áÄø ¡×¤Ë¤ª¤±¤ëÅö³º¥¢¥Ë¥á¤Î½ô¾ðÊó¤Ï¡¢e.step ¥á¥½¥Ã¥É¤¬¥¢¥Ë¥áÂоÝÍ×ÁÇ¡Ê °Ê²¼ A ¡Ë¤Î¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¡Ê °Ê²¼ props ¡ËËè¤Ë¡¢¥ß¥êÉÃñ°Ì¤ÇÀŻ߲è¤ò·«¤êÊÖ¤·ÉÁ²è¤¹¤ë²áÄø¤Ë¤ª¤¤¤Æ¡¢¹ï¡¹¤ÈÊѲ½¤·¤Þ¤¹¡£
½ô¾ðÊó¤Ï e ¥¤¥ó¥¹¥¿¥ó¥¹¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£¡Ú startTime, start, end, unit, now, pos, state ¡Û¤Ë¡¢²¿É´²ó¤È¤Ê¤¯¾å½ñ¤¤¬·«¤êÊÖ¤µ¤ì¤Þ¤¹¡£
¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç¤Ï¤³¤ì¤é¤ÎÃͤò¼è¤ê¤À¤·¤Æ¤ß¤Þ¤¹¡£
¤â¤Á¤í¤ó¤½¤ÎÁ´¤Æ¤ò¼è¤ê¤À¤·¤Æ¤¤¤¿¤é¿ôÀé,¿ôËü¤Î¥Ç¡¼¥¿¤È¤Ê¤ë¤¿¤á¡¢¤³¤³¤Ç¤Ï¥¢¥Ë¥á·Ñ³»þ´Ö ¡Ê duration ¡Ë¤Î 15¡ó¡¢30¡ó¡¢50¡ó¡¢75¡óµÚ¤Ó 100¡ó¤Î»þ´Ö¤¬·Ð²á¤·¤¿ 5 ¤Ä¤Î»þÅÀ¤Ë¹Ê¤Ã¤Æ¡¢¤½¤ì¤¾¤ì¤Î·Ð²á»þÅÀ¤Ë¤ª¤±¤ë¥×¥í¥Ñ¥Æ¥£Ãͤò¼è¤ê½Ð¤¹¤³¤È¤È¤·¤Þ¤¹¡£
¤Ê¤ª¡¢À޳ѱÜÍ÷¤·¤ÆÂפ¯¤Î¤Ç¡¢±ÜÍ÷¼Ô¤¬Áàºî¤Ë¤¢¤ëÄøÅٴؤï¤ì¤ë¤è¤¦ÇÛθ¤·¤Þ¤·¤¿¡£
Âè 1 ¤Ë props¡Ê¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¡Ë¤òÁªÂò¤Ç¤¤ë¤è¤¦¤Ë¡¢Âè 2 ¤Ë¡¢¥¢¥Ë¥á¤Ç»ÈÍѤ¹¤ë easing ´Ø¿ô¤ò¿¿ôÍѰդ·¡¢¤³¤ì¤â±ÜÍ÷¼Ô¤¬ÁªÂò¤Ç¤¤ë¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£
°Ê²¼¤¬¥µ¥ó¥×¥ë¤Ç¤¹¡£¥Ü¥Ã¥¯¥¹¤¬ 6 ¤Ä¡£º¸¤«¤é½ç¤Ë¥¢¥Ë¥áÁǺà¤È¤·¤¿¥Ü¥Ã¥¯¥¹¡¢¥¢¥Ë¥á³«»Ï¸å¤Î»þ´Ö¤¬¡¢ÀßÄêºÑ¤ß¤Î·Ñ³»þ´Ö¤Î 15 ¡ó¿Ê¹Ô¤·¤¿Ãʳ¬¤Ç»ß¤Þ¤ë¥Ü¥Ã¥¯¥¹¡¢°Ê²¼ 30¡ó¡¢50¡ó¡¢75¡ó¤Ç¤½¤ì¤¾¤ìÄä»ß¤¹¤ë¥Ü¥Ã¥¯¥¹¡¢ºÇ¸å¤¬Ä̾ïÄ̤ꥢ¥Ë¥á¡¼¥·¥ç¥ó¤µ¤ì¤ë¥Ü¥Ã¥¯¥¹¤Ç¤¹¡£¤Ê¤ª¡¢¥¢¥Ë¥á·Ñ³»þ´Ö¤Ï¡¢¿Ê¹Ô²áÄø¤ò¤æ¤Ã¤¯¤ê¸«¤»¤ë¤¿¤á¤Ë°ìΧ¤Ë 4 ÉäȤ·¤Þ¤·¤¿¡£
4 ¤Ä¤Î¿Ê¹Ô»þ´Ö¤¬°Û¤Ê¤ë¥¢¥Ë¥á¤Î½ô¾ðÊó ¡Ê ³Æ A ¤Î props¡£¶ñÂÎŪ¤Ë¤Ï³«»Ï»þ¹ï, ³«»ÏÃÍ, ½ªÎ»ÃÍ, ·Ð²á³ä¹ç, ÃͤÎÊѲ½ÅÙ¹ç, Ää»ßÃÍ, ·Ð²á»þ´Ö ¡Ë ¤Ï²¼¤ÎÊý¤ËÇÛÃÖ¤·¤¿ 4 ¤Ä¤ÎɽÆâ¤Ë¡¢¥¢¥Ë¥á¤¬Ää»ß¤·¤¿¤½¤Î½Ö´Ö¤ËÉÁ²è¤µ¤ì¤Þ¤¹¡£
¤³¤ì¤Ç±£ÊÃ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬»Ï¤Þ¤ê¡¢³Æ¡¹¤Î¥Ü¥Ã¥¯¥¹¥¢¥Ë¥á¤¬»ØÄꤷ¤¿ÅÓÃæ¤ÎÃʳ¬¤ÇÄä»ß¤·¤Þ¤¹¡£Æ±»þ¤Ë¤½¤Î½Ö´Ö¤Ë¡¢Ää»ß»þ¤Î¥¢¥Ë¥á¤Ë·¸¤ë½ô¾ðÊ󤬲¼¤Îɽ¤Ë½ÐÎϤµ¤ì¤Þ¤¹¡£
¤³¤Î¾ðÊó¤Ë¤è¤Ã¤Æ jquery.js ¤¬½èÍý¤·¤Æ¤¤¤ë¥¢¥Ë¥á¾ðÊó¤Î¶ñÂÎŪ¤ÊÆâÍÆ¤òÃΤ뤳¤È¤¬½ÐÍè¤Þ¤¹¡£
¤Ê¤ª¡¢¥¢¥Ë¥áºÆ³«»þ¤Î½ô¾ðÊó¤Ïɽ¤Ë¤Ï½ÐÎϤµ¤ì¤Þ¤»¤ó¡£
¸À¤¦¤Þ¤Ç¤â¤Ê¤¯¡¢easing ´Ø¿ô¤òÊѤ¨¡¢·Ñ³»þ´Ö¤òÊѤ¨¡¢¤¢¤ë¤¤¤Ï¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤òÊѤ¨¤Æ¡¢²¿²ó¤Ç¤âÅÓÃæÄä»ß¥¢¥Ë¥á¡¼¥·¥ç¥ó¥µ¥ó¥×¥ë¤òµ¯Æ°¤µ¤»¤ë¤³¤È¤¬½ÐÍè¤Þ¤¹¡£
¤Ê¤ª¡¢¥Ü¥¿¥ó¡¢¥»¥ì¥¯¥È¥Ü¥Ã¥¯¥¹µÚ¤Ó¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹¤Ï¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¿Ê¹ÔÃæ¤äÅÓÃæÄä»ß¾õÂ֤λþ¤Ë¤Ï»È¤¨¤Ê¤¤¤è¤¦¤Ë disabled °À¤òÄ´À°¤¹¤ë¤È¶¦¤Ë¡¢¥«¥Ð¡¼¥Ü¥Ã¥¯¥¹¤ò¥¢¥Ë¥á¡¼¥È¤µ¤»¡¢»ÈÍѲÄǽ/ÉÔǽ¤¬»ë³ÐŪ¤Ë¤â°ìÌÜÎÆÁ³¤È¤Ê¤ë¤è¤¦¤Ë¹©Éפ·¤Þ¤·¤¿¡£
sT:³«»Ï»þ¹ï, sV:³«»ÏÃÍ, eV:½ªÎ»ÃÍ, s:·Ð²á³ä¹ç,pos:ÊѲ½ÅÙ¹ç,
nV:Ää»ßÃÍ, eT:·Ð²á»þ´Ö, nV = sV + ( eV -sV ) * pos
| property | sT | sV | eV | s | pos | nV | eT |
|---|---|---|---|---|---|---|---|
| marginTop | |||||||
| marginRight | |||||||
| marginBottom | |||||||
| marginLeft | |||||||
| borderTopWidth | |||||||
| borderRightWidth | |||||||
| borderBottomWidth | |||||||
| borderLeftWidth | |||||||
| paddingTop | |||||||
| paddingRight | |||||||
| paddingBottom | |||||||
| paddingLeft | |||||||
| width | |||||||
| height | |||||||
| opacity | |||||||
| fontSize |
sT:³«»Ï»þ¹ï, sV:³«»ÏÃÍ, eV:½ªÎ»ÃÍ, s:·Ð²á³ä¹ç,pos:ÊѲ½ÅÙ¹ç,
nV:Ää»ßÃÍ, eT:·Ð²á»þ´Ö, nV = sV + ( eV -sV ) * pos
| property | sT | sV | eV | s | pos | nV | eT |
|---|---|---|---|---|---|---|---|
| marginTop | |||||||
| marginRight | |||||||
| marginBottom | |||||||
| marginLeft | |||||||
| borderTopWidth | |||||||
| borderRightWidth | |||||||
| borderBottomWidth | |||||||
| borderLeftWidth | |||||||
| paddingTop | |||||||
| paddingRight | |||||||
| paddingBottom | |||||||
| paddingLeft | |||||||
| width | |||||||
| height | |||||||
| opacity | |||||||
| fontSize |
sT:³«»Ï»þ¹ï, sV:³«»ÏÃÍ, eV:½ªÎ»ÃÍ, s:·Ð²á³ä¹ç,pos:ÊѲ½ÅÙ¹ç,
nV:Ää»ßÃÍ, eT:·Ð²á»þ´Ö, nV = sV + ( eV -sV ) * pos
| property | sT | sV | eV | s | pos | nV | eT |
|---|---|---|---|---|---|---|---|
| marginTop | |||||||
| marginRight | |||||||
| marginBottom | |||||||
| marginLeft | |||||||
| borderTopWidth | |||||||
| borderRightWidth | |||||||
| borderBottomWidth | |||||||
| borderLeftWidth | |||||||
| paddingTop | |||||||
| paddingRight | |||||||
| paddingBottom | |||||||
| paddingLeft | |||||||
| width | |||||||
| height | |||||||
| opacity | |||||||
| fontSize |
sT:³«»Ï»þ¹ï, sV:³«»ÏÃÍ, eV:½ªÎ»ÃÍ, s:·Ð²á³ä¹ç,pos:ÊѲ½ÅÙ¹ç,
nV:Ää»ßÃÍ, eT:·Ð²á»þ´Ö, nV = sV + ( eV -sV ) * pos
| property | sT | sV | eV | s | pos | nV | eT |
|---|---|---|---|---|---|---|---|
| marginTop | |||||||
| marginRight | |||||||
| marginBottom | |||||||
| marginLeft | |||||||
| borderTopWidth | |||||||
| borderRightWidth | |||||||
| borderBottomWidth | |||||||
| borderLeftWidth | |||||||
| paddingTop | |||||||
| paddingRight | |||||||
| paddingBottom | |||||||
| paddingLeft | |||||||
| width | |||||||
| height | |||||||
| opacity | |||||||
| fontSize |
jquery.js ¤Î animate ¥á¥½¥Ã¥É¤Ï¥¢¥Ë¥á¡¼¥·¥ç¥óưºî³«»ÏÁ°¤Ë e ¥¤¥ó¥¹¥¿¥ó¥¹¤òºîÀ®¤·¡¢¤½¤Î¥×¥í¥Ñ¥Æ¥£¾å¤Ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ë·¸¤ë¿¿ô¤Î¾ðÊó¤òÊÝ»ý¤·Â³¤±¡¢¾å½ñ¤¤ò·«¤êÊÖ¤·¤Æ¥¢¥Ë¥á¤ò¼Â¸½¤·¤Æ¤¤¤Þ¤¹¡£¤½¤Î¤³¤È¤Ï¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ë´Ø¤¹¤ë¥·¥ê¡¼¥º¥¨¥ó¥È¥ê¥¤¤ÎºÇ½é¡Ê jquery.js ¤Ë¤ª¤±¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥É¤Î²òÆÉ ( 1 ) ¡Ë¤Ç¤â¿¨¤ì¤Þ¤·¤¿¡£
¤½¤Î e ¥¤¥ó¥¹¥¿¥ó¥¹¤Ë¤Ï¡¢¿ô¼ïÎà¤Î¥á¥½¥Ã¥É ¡Ê cur, custuom, step, update, show, hide ¡Ë ¤â·ÁÀ®¤µ¤ì¡¢¤³¤ì¤é¤Î¥á¥½¥Ã¥É¤¬Íµ¡Åª¤ËÏ¢·È¤·¤Æ ¡Ö ư¤ ¡× ¤ò±é½Ð¤·¤Þ¤¹¡£animate ¥á¥½¥Ã¥ÉÆâ¤Ç¤Î¤³¤ì¤é¤Î¥á¥½¥Ã¥ÉÏ¢·È¤ò²þ¤á¤ÆÀ×ÉÕ¤±¤Æ¤ß¤ë¤È¼¡¤Î¤è¤¦¤Ë¤Ê¤Ã¤Æ¤¤¤Þ¤¹¡£
¤½¤Î»ØÄêÃͤ¬ show¡¢hide ¤Þ¤¿¤Ï toggle ¤Î»þ¤Ë¤Ï e.show Ëô¤Ï e.hide ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤Æ¡¢¤½¤ÎÃæ¤ÇɬÍפʽèÍý¤ò¹Ô¤Ã¤Æ¤«¤é¡¢e.custum ¥á¥½¥Ã¥É¤¬¸Æ¤Ó½Ð¤µ¤ì¤Þ¤¹¡£
»ØÄꤵ¤ì¤¿½ªÎ»Ãͤ¬¤½¤ì¤é¤Îʸ»úÎó¤Ç¤Ï¤Ê¤¤¾ì¹ç¤Ë¤Ï¡¢¤½¤ÎÃͤòanimate¥á¥½¥Ã¥ÉÆâ¤Çɾ²Á½èÍý¤·¤Æ¤«¤é¡Ê ¤³¤Î»þ¤Ë¸½ºßÃͤò·×»»¤¹¤ë¥á¥½¥Ã¥É¤¬ e.cur ¤Ç¤¹ ¡Ë¡¢¤ä¤Ï¤ê¡¢e.custum ¥á¥½¥Ã¥É¤¬¸Æ¤Ó½Ð¤µ¤ì¤Þ¤¹¡£
¤³¤¦¤·¤Æ animate ¥á¥½¥Ã¥ÉÆâ¤Î e ¥¤¥ó¥¹¥¿¥ó¥¹¥µ¥Ö¥ë¡¼¥Á¥ó¥á¥½¥Ã¥ÉÏ¢º¿¤Ïɬ¤º e.custom ¥á¥½¥Ã¥É¤«¤é»Ï¤Þ¤ê¤Þ¤¹¡£
¤µ¤Æ¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¼Â¹ÔÃæ¤Ë¥æ¡¼¥¶¡¼¤¬½ÐÍè¤ë¤³¤È¤Ï¡¢¥Ö¥é¥¦¥¶¤òÄä»ß¤¹¤ë¡¢¥Ñ¥½¥³¥ó¤ÎÅŸ»¤òÀÚ¤ëÅù¤Î³°ÅªºîÍѤξ¤Ë¤Ï¡¢(1) ¥¢¥Ë¥á¤¬½ª¤ï¤ë¤Î¤òÂԤĤ«¡¢(2) e.options.step ¥á¥½¥Ã¥É¤ò¤¢¤é¤«¤¸¤á»ØÄꤷ¤Æ¤ª¤¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¿Ê¹ÔÅÓÃæ¤Ç¤½¤ì¤ò¼Â¹Ô¤µ¤»¤ë¤«¡¢¤³¤Î 2 Âò ¤·¤«¤¢¤ê¤Þ¤»¤ó¡£¥¢¥Ë¥á¤òÅÓÃæ¤ÇÄä»ß¤µ¤»¤ë»Ø¼¨¤òÍ¿¤¨¤ë¾ì¹ç¤â¡¢e.options.step ¥á¥½¥Ã¥ÉÆâ¤Ë $().stop ¥á¥½¥Ã¥É¤ò¤¢¤é¤«¤¸¤á»Å¹þ¤ó¤Ç¤ª¤¯¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
¤³¤³¤Ç¤Ï (2) ¤ÎÅÓÃæ¤Ç²¿¤«¤ò¤µ¤»¤ë¥á¥½¥Ã¥É e.options.step ¤Î»ØÄêÊýË¡¤Ë¤Ä¤¤¤Æ¸ÀµÚ¤·¤Þ¤¹¡£
¤³¤Î¥á¥½¥Ã¥É¤Ï e.update ¥á¥½¥Ã¥É¤ÎËÁƬ¤Çµ¯Æ°¤µ¤ì¤Þ¤¹¡£¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£Ëè¤Ë¡¢¿ô¥ß¥êÉÃËè¤Ë·«¤êÊÖ¤·¼Â¹Ô¤µ¤ì¤ë e ¥¤¥ó¥¹¥¿¥ó¥¹¥á¥½¥Ã¥É¥Á¥§¡¼¥óÆâ¤Ë¤ª¤¤¤Æ¡¢²¿É´²ó¡¢²¿Àé²ó¤ÈÉÁ²è¤¬·«¤êÊÖ¤µ¤ì¤Þ¤¹¤¬¡¢¤½¤ÎÉÁ²èľÁ°Ëè¤Ë¡¢e.options.step ¥á¥½¥Ã¥É¤¬¼Â¹Ô¤µ¤ì¤Þ¤¹¡£
¤³¤Î e.options.step ¤Î°ú¿ô¤Ï¡¢¥¢¥Ë¥á¥×¥í¥Ñ¥Æ¥£¸½ºßÃÍ¤È e ¥¤¥ó¥¹¥¿¥ó¥¹¤Î 2 ¤Ä¤Ç¡¢µ¯Æ°¸µ¤Î this.elem ¤ÈÊ»¤»¤Æ jquery.js #4018 ¤Ç̵¾ò·ï¤Ë»ØÄꤵ¤ì¤Þ¤¹¡£µ¯Æ°¸µ¤Ï¥¢¥Ë¥á¡¼¥·¥ç¥óÂоÝÍ×ÁÇ¥¿¥°¤Ë»ØÄꤵ¤ì¤Þ¤¹¤«¤é¡¢e.options.step ¥á¥½¥Ã¥ÉÆâ¤Ë¤ª¤¤¤Æ this ¥¡¼¥ï¡¼¥É¤ò»È¤Ã¤¿¾ì¹ç¡¢¤½¤Î»²¾ÈÀè¤ÏÂоÝÍ×ÁÇ¥¿¥°¤È¤Ê¤ê¤Þ¤¹¡£
¤Þ¤¿¡¢ °ú¿ô¤Ë e ¥¤¥ó¥¹¥¿¥ó¥¹¤¬¤¢¤ë¤È¸À¤¦¤³¤È¤Ï¥¢¥Ë¥á¤Ë·¸¤ëÁ´¤Æ¤Î¾ðÊó¤Ë¡¢ e.options.step ¥á¥½¥Ã¥É¤«¤é¥¢¥¯¥»¥¹¤Ç¤¤ë¤³¤È¤ò°ÕÌ£¤·¤Æ¤¤¤Þ¤¹¡£¤³¤ÎÅÀ¤Ï¶Ë¤á¤Æ½ÅÍפʥݥ¤¥ó¥È¤Ç¤¹¡£
°Ê¾å¤Î¼Â¹Ô¥¿¥¤¥ß¥ó¥°¤È°ú¿ô¤òƧ¤Þ¤¨¤¿Ìó 200 ¹Ô¤Î¥³¡¼¥É¤Ë¤è¤Ã¤Æ¡¢¤³¤Î¥¨¥ó¥È¥ê¥¤¤Î¥µ¥ó¥×¥ë¤ò¼Â¸½¤·¤Þ¤·¤¿¡£¶ñÂÎŪ¤ÊÊýË¡¤Ï¡¢¸å¤Ë·ÇºÜ¤·¤¿¥³¡¼¥É¤ÎÄ̤ê¤Ç¤¹¤¬¡¢Í×ÅÀ¤òµ¤·¤Æ¤ª¤¤Þ¤¹¡£
¤³¤ì¤Þ¤Ç¤Ï´Êñ¤Ë¸À¤¨¤Ð¡Ö ÌÌÅÝ¤Ê¤Î¤Ç ¡×¡Ê¶ì¾Ð¡Ë¡¢form Í×ÁǤλÈÍѤò½ÐÍè¤ë¤À¤±Èò¤±¤Æ¤¤Þ¤·¤¿¡£¤»¤¤¤¼¤¤¥Ü¥¿¥ó¤òñÆÈ¤Ç¿ÍѤ·¤Æ¤¤¿ÄøÅ٤ǡ¢¥ê¥¹¥È¥Ü¥Ã¥¯¥¹¡¢¥³¥ó¥Ü¥Ü¥Ã¥¯¥¹¡¢¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹¤Ê¤É¤Î¥Ö¥é¥¦¥¶±ÜÍ÷¼Ô¤¬Áàºî¤·¡¢¤½¤Î·ë²Ì¤òÈ¿±Ç¤µ¤»¤é¤ì¤ë¥Ä¡¼¥ë¤ÏËØ¤É»È¤Ã¤Æ¤¤Þ¤»¤ó¤Ç¤·¤¿¡£
¤½¤Î°ÕÌ£¤Ç¤Ïº£²ó¤Î¥Á¥ã¥ì¥ó¥¸¤Ï¡¢step ¥á¥½¥Ã¥É¤Î»È¤¤¾¡¼ê¤ò»î¤·¤Æ¤ß¤ë°Ê³°¤Ë¡¢form Í×ÁǤò¶î»È¤¹¤ë¥³¡¼¥Ç¥£¥ó¥°¤Ë¿¿ÀµÌ̤«¤é¼è¤êÁȤó¤ÀÅÀ¤¬Âç¤¤ÊÆÃħ¤Ç¤¢¤ê¡¢¤Þ¤¿¤½¤ì¤¬¥Ï¡¼¥É¥ë¤È¤â¤Ê¤ê¤Þ¤·¤¿¡£
¤³¤³¤ÇÇÛÃÖ¤·¤¿ form Í×ÁǤλȤ¤¤ä¤¹¤µ¤Ë¤Ä¤¤¤Æ¤Ï±ÜÍ÷¼Ô¤ÎÈãȽ¤ò´Å¼õ¤¹¤ë¤·¤«¤¢¤ê¤Þ¤»¤ó¤¬¡¢¥¢¥Ë¥áÃæ¤Ë form Í×ÁǤòÊѹ¹¤µ¤ì¤Ê¤¯¤¹¤ë¤¿¤á¤Î¡¢»×¤¤¤Ä¤¤Çºî¤Ã¤¿Æó½Å¤Î½èÍý¡Ê disabled °À¤Î½èÍý¤È±£ÊÃ¥«¥Ð¡¼¤ò¥¢¥Ë¥á¤ÇÈ碌¤¿¤³¤È¡Ë¤Ë¤Ï¡¢¤½¤ì¤Ê¤ê¤ËËþ¤·¤Æ¤¤¤Þ¤¹¡£
¤Ê¤ª¡¢¤³¤Î¥«¥Ð¡¼¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ë¤ª¤¤¤Æ¤â¥æ¡¼¥¶¡¼»ØÄê¤Î easing ´Ø¿ô¤ò»È¤¦¤è¤¦¤ËÀ߷פ·¤Æ¤¢¤ê¤Þ¤¹¡£
options.step ¥á¥½¥Ã¥É¤Ë¤ª¤±¤ë¥¢¥Ë¥á¤ÎÅÓÃæÄä»ß¤Ï¡¢Æ°ºî¥¹¥Æ¡¼¥¿¥¹ ( e.state ) ¤ÎÁàºî¤Ë¤è¤ê¹Ô¤¤¤Þ¤·¤¿¡£
¥×¥í¥Ñ¥Æ¥£ÃͤÎÊÑÆ°³ä¹ç¤Ç¹Ô¤¦¤³¤È¤â²Äǽ¤Ç¤¹¤¬¡¢¤³¤ÎÃÍ¤Ï easing ´Ø¿ô¤Ë¤è¤Ã¤ÆÁý¸º¤¹¤ëưŪ¤Ê¤â¤Î¤Ê¤Î¤Ç¡¢»þ´Ö·Ð²á¤Ë¤è¤Ã¤ÆÅÓÃæ¤ÎÃʳ¬¤òª¤¨¤ëÊý¤¬³Î¼Â¤À¤È¹Í¤¨¤Þ¤·¤¿¡£
e.state ¤Ï °¿¤ë e.step ¥á¥½¥Ã¥É¤Î ¡Ö ¸Æ¤Ó½Ð¤·»þËø¤Î·Ð²á»þ´Ö¡à¥¢¥Ë¥á·Ñ³»þ´Ö ¡×¤ÇÄêµÁ¤µ¤ì¤Æ¤¤¤ë¡¢¡Ö ·Ð²á»þ´Ö³ä¹ç ¡×¤È¤Ç¤â¤è¤Ö¤Ù¤¤â¤Î¤Ç¤¹¤¬¡¢¤³¤ÎÃͤϷ褷¤Æ¿ôľÀþ¤Î¤è¤¦¤ÊϢ³Ū¤Ê¿ôÃͤˤϤʤê¤Þ¤»¤ó¡£
Åö³ºÍ×ÁǤÎÅö³º¥×¥í¥Ñ¥Æ¥£Ëè¤Ë¡¢·«¤êÊÖ¤·¸Æ¤Ó½Ð¤µ¤ì¤ë e.step ¤Î¸Æ¤Ó½Ð¤·»þËø¤Î·Ð²á»þ´Ö¤Ïɬ¤º°ìÄê´Ö³Ö¤¬¶õ¤¯¤«¤é¤Ç¤¹¡£¤Á¤ç¤¦¤É 15 ¡ó²á¤®¤¿¡¢¤½¤Î¥¿¥¤¥ß¥ó¥°¤Î»þ¤Ë¡¢¶ö¡¹ e.step ¤¬¸Æ¤Ó½Ð¤µ¤ì¤Æ¤¤¤ë¤È¤¤¤¦ÊݾڤÏÁ´¤¯¤¢¤ê¤Þ¤»¤ó¡£
¤³¤Î¤¿¤á 15 ¡óÁ°¸å¤Ë°ìÄê¤ÎÉý¤ò»ý¤¿¤»¤¿ ¡Ö µöÍÆ°è ¡×¤òÀßÄꤷ¤Ê¤¤¤È¡¢¥¢¥Ë¥áÄä»ß¤Î¥¿¥¤¥ß¥ó¥°¤¬Âª¤¨¤é¤ì¤Þ¤»¤ó¡£¤³¤Î¤¿¤á¡¢if ( e.state > (( stopPoint - permitter )/100 ) && e.state < (( stopPoint + permitter )/100) ) ¤È¸À¤¦¼°¤Ë¤è¤Ã¤Æ¡¢°ìÄê¤ÎµöÍÆ°è¤Ë¼ý¤Þ¤ë¥¿¥¤¥ß¥ó¥°¤òª¤¨¤Æ¡¢¤½¤Î½Ö´Ö¤Ë¥¢¥Ë¥á¤òÄä»ß¤µ¤»¤ë¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£stopPoint ¤Ï 15 ¡óÅù¤ÎÃÍ¡¢permitter ¤ÏµöÍÆÉý¤Ç¤¹¡£
½ô¾ðÊó¤Îɽ¤Ë¤ª¤±¤ë s Î󤬤½¤ÎµöÍÆ°èÆâ¤ÇÊ䤵¤ì¤¿¤³¤È¤ò¼¨¤¹·Ð²á»þ´Ö³ä¹ç¤Ç¤¹¡£
¤·¤«¤â¡¢µöÍÆÉý¤Ï¥¢¥Ë¥á·Ñ³»þ´Ö¤È¤Î´Ø·¸¤ÇÊÑÆ°¤µ¤»¤ëɬÍפ¬¤¢¤ê¤Þ¤·¤¿¡£Í¾¤êû»þ´Ö¤Î·Ñ³»þ´Ö¤À¤È e.step ¤Îµ¯Æ°²ó¿ô¤¬¾¯¤Ê¤¯¤Ê¤ë¤Î¤Ç¡¢µöÍÆÉý¤ò¹¤²¤Ê¤¤¤È¡Ö ¤½¤Î½Ö´Ö ¡×¤òª¤¨¤é¤ì¤Ê¤¤¤Î¤Ç¤¹¡£¤³¤¦¤·¤Æ·Ñ³»þ´Ö¤¬Ä¹¤±¤ì¤ÐµöÍÆÉý¤Ï¾®¤µ¤¯¡¢·Ñ³»þ´Ö¤¬Ã»¤¤¾ì¹ç¤Ë¤ÏŤ¯¤Ê¤ë¤è¤¦¡¢Æ°Åª¤ËÊÑÆ°¤¹¤ë¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£
½ÐÍè¤ë¤À¤±´Êñ¤ÊÁàºî¤Ë¤Ê¤ë¤è¤¦¡¢±£ÊÃ¥¢¥Ë¥áµ¯Æ°¡¢±£ÊÃ¥¢¥Ë¥áÄä»ß¸å¤ÎºÆ³«¡¢É½¼¨¥¢¥Ë¥áµ¯Æ°¡¢É½¼¨¥¢¥Ë¥áÄä»ß¸å¤ÎºÆ³«¨¡¨¡¨¡¤È¤¤¤¦°ìÏ¢¤ÎÁàºî¤òÁ´¤Æ 1 ¤Ä¤Î¥Ü¥¿¥ó¤À¤±¤Ç¹Ô¤¦¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£
¤½¤Î·ë²Ì¥³¡¼¥É¤ÏÊ£»¨¤Ë¤Ê¤é¤¶¤ë¤òÆÀ¤Þ¤»¤ó¤Ç¤·¤¿¡£4 ²ó¤Î¤½¤ì¤¾¤ì¤ÎÁàºî¤Î°ÕÌ£¤¬Á´¤Æ°Û¤Ê¤ë¤¿¤á¡¢¤½¤ì¤¾¤ìËè¤Ë°Û¤Ê¤ë¥³¡¼¥Ç¥£¥ó¥°Â¾É¬ÍפȤʤ뤿¤á¤Ç¤¹¡£¤³¤ì¤ò click ¥¤¥Ù¥ó¥È¤Î Toggle ¥á¥½¥Ã¥ÉÍøÍѤȡ¢¤½¤ÎÃæ¤Î 2 ¤Ä¤Î´Ø¿ô¤Îµ¯Æ°²ó¿ô¡Ê´ñ¿ô²ó¤«¶ö¿ô²ó¤«¡Ë¤Ë¤è¤Ã¤Æ 4 ¤Ä¤Ëʬ¤±¤ë¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£
º£²ó¤â¤Þ¤¿ IE Âкö¤ò»Ü¤µ¤Í¤Ð¤Ê¤ê¤Þ¤»¤ó¤Ç¤·¤¿¡£W 3 C ½àµò¤Ë¤Ê¤Ã¤¿¤Ï¤º¤Î IE 8 ¤Ë¤ª¤¤¤Æ¤â¤Þ¤À¡¢½àµò¤¬ÉÔ½½Ê¬¤ÊÅÀ¤¬»Ä¤Ã¤Æ¤¤¤ë¤Î¤Ç¤·¤ç¤¦¡£
¶ñÂÎŪ¤Ë¤Ï¥¢¥Ë¥á¡¼¥·¥ç¥óÂоݥץí¥Ñ¥Æ¥£¤È¤·¤Æ¥Õ¥©¥ó¥È¥µ¥¤¥º¤ò»ØÄꤷ¤¿¾ì¹ç¤ÎÂбþ¤Ç¤¹¡£Firefox ¤Î¾ì¹ç¤Ë¤ÏÁ´¤¯ÌäÂ꤬¤Ê¤«¤Ã¤¿¤Î¤Ç¤¹¤¬¡¢¥Õ¥©¥ó¥È¥µ¥¤¥º¤ò¥¢¥Ë¥áÂоݤȤ·¤¿¾ì¹ç¤Ë¤ª¤¤¤Æ¡¢IE ¤Ë¤ª¤¤¤Æ¤Ï½é´üÃͤΥե©¥ó¥È¥µ¥¤¥º¤ò»ØÄꤷ¤Ê¤¤¤È¡¢¥¢¥Ë¥áÁ°¤Î¥Õ¥©¥ó¥È¥µ¥¤¥º¤ò¾¡¼ê¤ËºÇÂ祵¥¤¥º¡Ê ¤ª¤½¤é¤¯96 pt ¡Ë¤È²ò¼á¤·¤Æ¤·¤Þ¤¦¤Î¤Ç¤¹¡£
»ÅÊý¤Ê¤¯¡¢¥¢¥Ë¥áÎΰè¤À¤±¥Õ¥©¥ó¥È¥µ¥¤¥º¤ò»ØÄꤻ¤¶¤ë¤òÆÀ¤Þ¤»¤ó¤Ç¤·¤¿¡£
Web ¥µ¥¤¥ÈºîÀ®¾å¡¢¥Õ¥©¥ó¥È¥µ¥¤¥º¤ò¸ÇÄêŪ¤Ë»ØÄꤹ¤ë¤³¤È¤Ï¿ä¾©¤µ¤ì¤Æ¤¤¤Þ¤»¤ó¡£¥æ¡¼¥¶¡¼¤¬¥Ö¥é¥¦¥¶¤Î³ÈÂç/½Ì¾®µ¡Ç½¤ò»È¤Ã¤¿¾ì¹ç¤Ë¡¢¥Õ¥©¥ó¥È¥µ¥¤¥º¤¬¸ÇÄꤵ¤ì¤Æ¤¤¤ë¤È¥Õ¥©¥ó¥È¤À¤±³ÈÂç/½Ì¾®¤µ¤ì¤Ê¤¤¤«¤é¤Ç¤¹¡£¤Ç¤¹¤«¤é»ä¤Î¾ì¹ç¥Õ¥©¥ó¥È¥µ¥¤¥º»ØÄê¤ÏÁ´¤¯¹Ô¤Ã¤Æ¤³¤Ê¤«¤Ã¤¿¤Î¤Ç¤¹¤¬Ž¤º£²ó¤Î¾ì¹ç¤ä¤à¤òÆÀ¤º»ØÄꤻ¤¶¤ë¤òÆÀ¤Þ¤»¤ó¤Ç¤·¤¿¡£
±£ÊÃ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ï³«»Ï»þÅÀ¤Î¥×¥í¥Ñ¥Æ¥£ÃÍ¡Ê ³«»ÏÃÍ ¡Ë¤ò e.hide ¥á¥½¥Ã¥ÉÆâ¤Ç¼èÆÀ¤·¡¢É½¼¨¥¢¥Ë¥á¤Ï½ªÎ»»þÅÀ¤Î¥×¥í¥Ñ¥Æ¥£ÃÍ¡Ê ½ªÎ»ÃÍ ¡Ë¤ò e.show ¥á¥½¥Ã¥ÉÆâ¤Ç¼èÆÀ¤·¤Þ¤¹¡£¤½¤·¤Æ e.hide ¥á¥½¥Ã¥É¤Ï¥¢¥Ë¥áÂоÝÍ×ÁǤΰÀÃͤä style Ãͤò°ìÀÚÊѲ½¤µ¤»¤Þ¤»¤ó¡£¤À¤«¤é¤³¤½¡¢e.show ¥á¥½¥Ã¥É¤Î½ªÎ»Ãͤϡ¢¤½¤ÎľÁ°¤Ë¹Ô¤ï¤ì¤¿ e.hide ¥á¥½¥Ã¥É¤Î³«»ÏÃͤËÅù¤·¤¯¤Ê¤ê¤Þ¤¹¡£
¤³¤³¤Ë¡¢³«»ÏÃͤ⽪λÃͤⶦ¤Ë¡¢e.cur ¥á¥½¥Ã¥É¤Ë¤è¤Ã¤Æ¡¢¥¢¥Ë¥áÂоݥ¿¥°¤Î (1) °ÀÃͤä (2) style ¥ª¥Ö¥¸¥§¥¯¥ÈÃÍ¡¢¤¢¤ë¤¤¤Ï (3) »»½Ð¥¹¥¿¥¤¥ëÃͤ«¤é»»½Ð¤µ¤ì¤Þ¤¹¡£
¤µ¤Æ¡¢Ää»ß¸å¤ËºÆ³«¤µ¤ì¤ë¥¢¥Ë¥á¤Î½é´üÃͤϡ¢Ää»ß»þÅÀ¤Î¥×¥í¥Ñ¥Æ¥£ÃͤȤʤê¤Þ¤¹¡£¤½¤·¤Æ¡¢Ää»ß»þ¤Î¥×¥í¥Ñ¥Æ¥£Ãͤϡ¢´û¤Ëư¤¤¤¿¸å¤Ê¤Î¤Ç¤¹¤«¤é¡¢ºÇ½é¤Ë¥¢¥Ë¥á¤òµ¯Æ°¤·¤¿»þ¤Î¥×¥í¥Ñ¥Æ¥£ÃͤȤϷ褷¤ÆÆ±°ì¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¡£
½¾¤Ã¤Æ¡¢¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤ò²¿¤âÊѹ¹¤»¤º¡¢Ã±½ã¤ËÄä»ß¤·¤Æ¤¤¤¿¥¢¥Ë¥á¤òºÆ³«¤µ¤»¤ë¤È¡¢ºÆ³«¸å¤ÎºÇ½ªÃͤÏÅö½é¤ÎÀßÄêÃͤȰۤʤäƤ·¤Þ¤¤¤Þ¤¹¡£
Î㤨¤Ð¤³¤³¤Î¥µ¥ó¥×¥ë¤Ç¸À¤¨¤Ð¡¢15¡ó¤ÇÄä»ß¤µ¤»¤¿¥¢¥Ë¥á¤òºÆ³«¤·¤Æ±£Ê䵤»¡¢¤½¤Î¸åºÇ¸å¤Þ¤Çɽ¼¨¤µ¤»¤ë¤È¡¢¤½¤Îɽ¼¨¥µ¥¤¥º¤Ï 15¡ó ¤ÇÄä»ß¤·¤¿»þ¤Î¥µ¥¤¥º¤Ç¤¢¤Ã¤Æ¡¢·è¤·¤ÆÅö½é¤ÎÂ礤µ¤Þ¤Ç¤ÏÌá¤ê¤Þ¤»¤ó¡£
¤³¤ÎÌäÂê¤ò¤É¤¦¤ä¤Ã¤Æ²ò·è¤¹¤ë¤«¨¡¨¡¨¡¤³¤ÎÅÀ¤³¤½¡¢º£²ó¤Î¥³¡¼¥Ç¥£¥ó¥°¤ÇºÇ¤âƬ¤òǺ¤Þ¤»¤¿²Õ½ê¤Ç¤·¤¿¡£
°ìö animate ¥á¥½¥Ã¥É¤¬µ¯Æ°¤·¤Æ¤·¤Þ¤¦¤È¡¢¤½¤ÎÅÓÃæ¤Ç¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤ò¥æ¡¼¥¶¡¼¤¬Ä¾ÀÜÊѹ¹¤¹¤ë¤³¤È¤Ï¡¢options.step ¥á¥½¥Ã¥É¤ò»È¤Ã¤Æ¥¢¥Ë¥á¤ò¿Ê¹ÔÅÓÃæ¤Ç»ß¤á¤¿¤È¤·¤Æ¤âº¤Æñ¤Ç¤¹¡£
²¿¸Î¤Ê¤é¤Ð¡¢¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤Ï¡¢´û¤Ë animate ¥á¥½¥Ã¥É¤Ë¤è¤Ã¤ÆºîÀ®ºÑ¤ß¤Î e ¥¤¥ó¥¹¥¿¥ó¥¹¥ª¥Ö¥¸¥§¥¯¥ÈÆâ¤Î³Æ¥×¥í¥Ñ¥Æ¥£¤ËÃͤ¬³ÊǼ¤µ¤ì¤Æ¤·¤Þ¤Ã¤Æ¤¤¤Æ¡¢¥³¡¼¥É¤Ë¤è¤Ã¤Æ e ¥¤¥ó¥¹¥¿¥ó¥¹¤òÁàºî¤¹¤ë¤³¤È¤Ï½ÐÍè¤Ê¤¤¤«¤é¤Ç¤¹¡£
½ÐÍè¤ë¤³¤È¤Ï¡¢e ¥¤¥ó¥¹¥¿¥ó¥¹¤Î¥á¥½¥Ã¥É¤¬ºîư¤¹¤ëºÝ¤Ë¡¢style ¥ª¥Ö¥¸¥§¥¯¥È¡¢Í×ÁǰÀËô¤Ï»»½Ð¥¹¥¿¥¤¥ë¤«¤é¡¢³Æ¥×¥í¥Ñ¥Æ¥£Ãͤò»»½Ð¤¹¤ë¤³¤È¤ËÃåÌܤ·¤Æ¡¢Í×ÁǤΠstyle ¥ª¥Ö¥¸¥§¥¯¥È¤Î³Æ¥×¥í¥Ñ¥Æ¥£Ãͤ䡢ÄêµÁ¤Ç¤¤ë°À¤Ç¤¢¤ì¤ÐÍ×ÁǰÀÃͤò¡¢¼¡¤Î animate ¥á¥½¥Ã¥É¤¬»Ï¤Þ¤ëÁ°¤Ë¡¢¶¯À©Åª¤Ë½ñ¤´¹¤¨¤Æ¤·¤Þ¤¤¡¢¤½¤ì¤Ë¤è¤Ã¤Æ¼¡¤Î animate ¥á¥½¥Ã¥É¤Î³«»ÏÃͤäºÇ½ªÃͤòÁ°¤â¤Ã¤ÆÊѹ¹¤·¤Æ¤·¤Þ¤¦¤³¤È¤À¤±¤Ç¤¹¡£
¤³¤Î¤³¤È¤Ëµ¤¤¬¤Ä¤¤¤¿·ë²Ì¡¢ÅÓÃæÄä»ß¸å¤ËºÆ³«¤·¤¿¥¢¥Ë¥á¡¼¥·¥ç¥ó¤â¡¢ºÇ½é¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î³«»ÏÃͤȽªÎ»Ãͤò»²¾È¤¹¤ë¤è¤¦¤Ë¶¯À©Åª¤Ê¥³¡¼¥Ç¥£¥ó¥°¤ò»Ü¤·¤Æ¡¢¤ä¤Ã¤È¤³¤Î¥µ¥ó¥×¥ë¤¬´°À®¤·¤¿¤Î¤Ç¤·¤¿¡£
¡¡#animArea_725 {
¡¡¡¡position: relative; width:620px; margin:1em auto; height:140px;
¡¡¡¡background-color:lavender;border:0;font-size:16px;
¡¡}
¡¡#box0_725, #box15_725, #box30_725, #box50_725, #box75_725, #box100_725 {
¡¡¡¡position:absolute; top:10px; width:64px; height:84px; padding:3px;margin:5px;
¡¡¡¡background-color:darkgreen; border:8px ridge bisque;
¡¡}
¡¡#box0_725 {
¡¡¡¡left:10px;
¡¡}
¡¡#box15_725 {
¡¡¡¡left:110px;
¡¡}
¡¡#box30_725 {
¡¡¡¡left:210px;
¡¡}
¡¡#box50_725 {
¡¡¡¡left:310px;
¡¡}
¡¡#box75_725 {
¡¡¡¡left:410px;
¡¡}
¡¡#box100_725 {
¡¡¡¡left:510px;
¡¡}
¡¡#formBlock {
¡¡¡¡position:relative; width:600px;height:220px;margin:1em auto; border:1px dotted aquamarine;
¡¡¡¡line-height:1.1em; clear:both;
¡¡}
¡¡#fm_725 {
¡¡¡¡position:absolute; z-index:2; width:170px; margin:1em;
¡¡}
¡¡#fm_725 p{
¡¡¡¡color:black;background:ivory;text-indent:-0.5em;text-align:center;line-height:1.2em;
¡¡¡¡width:170px;
¡¡}
¡¡#fm2_725 {
¡¡¡¡position:absolute;left:190px;margin:1em;
¡¡¡¡width:345px; padding:10px;color:black;background:ivory;
¡¡¡¡height:175px;
¡¡}
¡¡#submit_725 {margin:0.5em 1em 1em; padding:5px;border:2px solid royalblue;text-align:center;}
¡¡#fm1shutter_725 {
¡¡¡¡position:relative; z-index:2; top:-176px;
¡¡¡¡width:170px; height:178px; background:teal; display:none;
¡¡}
¡¡#fm2shutter1_725 {
¡¡¡¡position:absolute; z-index:2; left:6px;top:8px;
¡¡¡¡width:350px; height:130px; background:teal; display:none;
¡¡}
¡¡#fm2shutter2_725 {
¡¡¡¡position:absolute; z-index:2; left:6px;top:142px;
¡¡¡¡width:350px; height:50px; background:teal; display:none;
¡¡}
¡¡input,button {overflow:visible; padding:2px;}
¢£ Javascript codes
(function(){
¡¡var $fm2 = $("#fm2_725"), $chk = $(".chkbox"), $done = $("#go"),$initAnim = $("#initAnim_725"),
¡¡¡¡$box0=$("#box0_725"), $box1=$("#box15_725"), $box2=$("#box30_725"),
¡¡¡¡$box3=$("#box50_725"), $box4=$("#box75_725"), $box5=$("#box100_725"),
¡¡¡¡$t1=$("#table1_725 tr"), $t2=$("#table2_725 tr"),
¡¡¡¡$t3=$("#table3_725 tr"), $t4=$("#table4_725 tr"),
¡¡¡¡$shutter1=$("#fm1shutter_725"), $shutter2=$("#fm2shutter1_725"), $shutter3=$("#fm2shutter2_725"),
¡¡¡¡selEasing="swing", // ÁªÂò¤µ¤ì¤¿ easing ´Ø¿ô¤òÆþ¤ì¤ëÊÑ¿ô¡£´ûÄêÃͤÏswing¤È¤·¤Æ¤ª¤¯
¡¡¡¡chkList=[], // ÁªÂò¤µ¤ì¤¿¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹¥ê¥¹¥È
¡¡¡¡animProp=[], animaCSS, boxCSS={},initCSS=[], dur=4000, //´ûÄêÃÍ£´ÉÃ;
¡¡¡¡permitter=0.9, // ¥Ñ¡¼¥»¥ó¥ÈµöÍÆÉý¡Ê´ûÄêÃÍ0.9¡Ë
¡¡¡¡odd = [false,false] , // Âè 1 ´Ø¿ôµÚ¤ÓÂè 2 ´Ø¿ô¤Îµ¯Æ°²ó¿ô¤¬´ñ¿ô¤«¤É¤¦¤«¤ò odd ÇÛÎó¤ËµÏ¿
¡¡¡¡ival, obj={},
¡¡¡¡fxAttrs = [
¡¡¡¡¡¡["marginTop","marginRight","marginBottom","marginLeft"],
¡¡¡¡¡¡["borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth"],["paddingTop","paddingRight","paddingBottom","paddingLeft"]
¡¡¡¡],
¡¡¡¡attrs=[];
¡¡// Á´¥×¥í¥Ñ¥Æ¥£Ì¾¤Îñ½ã¤Ê¥ê¥¹¥ÈÇÛÎóºîÀ®
¡¡for (var i=0; i<fxAttrs.length; i++)
¡¡¡¡for (var j=0; j<fxAttrs[i].length; j++)
¡¡¡¡¡¡attrs.push(fxAttrs[i][j]);
¡¡attrs = attrs.concat("width","height","opacity","fontSize");
¡¡// easing ¥ê¥¹¥È¤«¤é ÁªÂò¤µ¤ì¤¿ easing ´Ø¿ô¤òÃΤë
¡¡$("#sel_725").change(function(){
¡¡¡¡selEasing = $(this).val();
¡¡});
¡¡// ¥¢¥Ë¥á·Ñ³»þ´Ö¥³¥ó¥Ü¥Ü¥Ã¥¯¥¹¤«¤é ÁªÂò¤µ¤ì¤¿ duration Ãͤò dur ÊÑ¿ô¤ËÂåÆþ¤¹¤ë
¡¡$("#fm2_725 select").change(function(){
¡¡¡¡dur = +$(this).val();
¡¡¡¡permitter = (dur >2000) ? 0.9 : (dur > 800) ? 3 : 4;// µöÍÆÃͤò·Ñ³»þ´ÖËè¤ËÊѲ½¤µ¤»¤ë
¡¡});
¡¡// ¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹¤Î´ûÄêÃÍÁªÂòÀßÄê
¡¡$("#defaultSelect_725").click(function(){
¡¡¡¡$("#fm2_725 input:checkbox").val(
¡¡¡¡¡¡["margin","padding","width","height","opacity"]
¡¡¡¡);
¡¡});
¡¡// ¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹Á´ÁªÂòÀßÄê
¡¡$("#allSelect_725").click(function(){
¡¡¡¡$("#fm2_725 input:checkbox").val(
¡¡¡¡¡¡["margin","border","padding","width","height","opacity","fontSize"]
¡¡¡¡);
¡¡});
¡¡// ¥¢¥Ë¥á³«»ÏÁ°¤ÎÁ´¤Æ¤ÎCSS¥×¥í¥Ñ¥Æ¥£Ãͤò initCSS ÇÛÎó¤ËµÏ¿¤¹¤ë
¡¡$.each([$box1,$box2,$box3,$box4],function(){
¡¡¡¡for (var j=0; j<attrs.length; j++)
¡¡¡¡¡¡boxCSS[ attrs[j] ] = this.css( attrs[j] );
¡¡¡¡initCSS.push(boxCSS);
¡¡});
¡¡// ¥¢¥Ë¥áÍѤÎCSS¥ª¥Ö¥¸¥§¥¯¥È¡Ê margin¡¢borderWidth¡¢padding ¡Ë¤òºîÀ®¤¹¤ëmeta´Ø¿ô
¡¡var makeCSS =function(i,type){
¡¡¡¡$.each( fxAttrs[i],function(){obj[this]=type;} ); return obj;
¡¡}
¡¡// ¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹¾ðÊó¤òƧ¤Þ¤¨¤¿¥¢¥Ë¥áÍѤΠCSS ¥ª¥Ö¥¸¥§¥¯¥ÈºîÀ®
¡¡var make_animObj = function(type){
¡¡¡¡var retObj={}, mStr = chkList.join();
¡¡¡¡if (mStr.match("margin")) retObj = $.extend(retObj,makeCSS(0,type));
¡¡¡¡if (mStr.match("border")) retObj = $.extend(retObj,makeCSS(1,type));
¡¡¡¡if (mStr.match("paddin")) retObj = $.extend(retObj,makeCSS(2,type));
¡¡¡¡if (mStr.match("width")) retObj = $.extend(retObj,{width:type});
¡¡¡¡if (mStr.match("height")) retObj = $.extend(retObj,{height:type});
¡¡¡¡if (mStr.match("opacity")) retObj = $.extend(retObj,{opacity:type});
¡¡¡¡if (mStr.match("fontSize")) retObj = $.extend(retObj,{fontSize:type});
¡¡¡¡for (var p in retObj) animProp.push(p); // ¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¥ê¥¹¥È¤ò animProp ÇÛÎó¤Ë³ÊǼ
¡¡¡¡return retObj;
¡¡}
¡¡// °ì»þÄä»ß»þ¤Î¾ðÊó¤ò table ¤Ë½ñ¤¹þ¤à
¡¡function printOut(o,box){
¡¡¡¡var startTime =o.startTime.toString();
¡¡¡¡var output=[
¡¡¡¡¡¡startTime.substring(startTime.length-5,startTime.length), o.start,
¡¡¡¡¡¡Math.round(o.end*100)/100,
¡¡¡¡¡¡Math.round(o.state*10000)/100+"%", Math.round(o.pos*10000)/100+"%",
¡¡¡¡¡¡Math.round(o.now*10000)/10000, parseInt(dur * o.state)
¡¡¡¡];
¡¡¡¡for (var i=0;i<16;i++){
¡¡¡¡¡¡if (attrs[i]==o.prop ){
¡¡¡¡¡¡¡¡for (var j=0; j<7; j++)
¡¡¡¡¡¡¡¡¡¡box===$box1 ? $t1.eq(i+1).children().eq(j+1).text(output[j]) :
¡¡¡¡¡¡¡¡¡¡box===$box2 ? $t2.eq(i+1).children().eq(j+1).text(output[j]) :
¡¡¡¡¡¡¡¡¡¡box===$box3 ? $t3.eq(i+1).children().eq(j+1).text(output[j]) :
¡¡¡¡¡¡¡¡¡¡box===$box4 ? $t4.eq(i+1).children().eq(j+1).text(output[j]) : null;
¡¡¡¡¡¡}
¡¡¡¡}
¡¡}
¡¡// goAnim ¥á¥½¥Ã¥É¤«¤é¸Æ¤Ó½Ð¤µ¤ì¤Æ°ì»þÄä»ß»þ¤Î¾ðÊó¤ò¼èÆÀ¤¹¤ë
¡¡function doStep(box,obj,stopPoint){
¡¡¡¡box.animate(obj,{
¡¡¡¡¡¡step:function(){
¡¡¡¡¡¡¡¡if (stopPoint==100) return;
¡¡¡¡¡¡¡¡var e = arguments[1];
¡¡¡¡¡¡¡¡if (e.state > ((stopPoint-permitter)/100) && e.state < ((stopPoint+permitter)/100)){
¡¡¡¡¡¡¡¡¡¡var o = $.extend({},e);
¡¡¡¡¡¡¡¡¡¡if (o.prop === animProp[animProp.length-1]) {
¡¡¡¡¡¡¡¡¡¡¡¡box.stop();
¡¡¡¡¡¡¡¡¡¡}
¡¡¡¡¡¡¡¡¡¡printOut.call(null,o,box);
¡¡¡¡¡¡¡¡}
¡¡¡¡¡¡},
¡¡¡¡¡¡duration:dur, easing:selEasing
¡¡¡¡});
¡¡}
¡¡// type="toggle" ¤Ç show/hide ¤ò½Û´Ä¤µ¤»¤ë
¡¡function goAnima(type){
¡¡¡¡var stopTime =[];
¡¡¡¡stopTime =[15,30,50,75,100];
¡¡¡¡animaCSS = make_animObj(type);
¡¡¡¡$.each([$box1,$box2,$box3,$box4,$box5],function(i){
¡¡¡¡¡¡doStep(this,animaCSS,stopTime[i]);
¡¡¡¡});
¡¡}
¡¡// ¥¢¥Ë¥á¤ÈÂоݲèÁü¤Î½é´ü²½
¡¡$initAnim.click(function(){
¡¡¡¡$.each([$box1,$box2,$box3,$box4],function(i){
¡¡¡¡¡¡this.stop(true,true);
¡¡¡¡¡¡for (var j=0; j<attrs.length; j++){
¡¡¡¡¡¡¡¡$.attr(this.get(0).style, attrs[j] ,initCSS[i][attrs[j]]);
¡¡¡¡¡¡}
¡¡¡¡});
¡¡¡¡$(this).blur();
¡¡});
¡¡ // select ¥ª¥×¥·¥ç¥ó¡¦¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹¡¦¥³¥ó¥Ü¥Ü¥Ã¥¯¥¹¤Î»ÈÍÑÉÔǽ/²Äǽ¤òÀÚ¤êÂØ¤¨¤ë
¡¡function elementsDisabled(type){
¡¡¡¡$("#fm_725 option").attr("disabled",type).get(0).disabled="disabled"; // easing¥ê¥¹¥È¥Ü¥Ã¥¯¥¹
¡¡¡¡$("#fm2_725 option").attr("disabled",type); // duration ¥³¥ó¥Ü¥Ü¥Ã¥¯¥¹
¡¡¡¡$("#fm2_725 input:checkbox").attr("disabled",type); // ¥×¥í¥×ÁªÂò¥Ü¥Ã¥¯¥¹
¡¡¡¡$("#defaultSelect_725").attr("disabled",type); // ´ûÄêÁªÂò¥Ü¥¿¥ó
¡¡¡¡$("#allSelect_725").attr("disabled",type); // Á´ÁªÂò¥Ü¥¿¥ó
¡¡}
¡¡ // ¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹¤Î¥ª¥ó¥ª¥Õ¾õÂÖ¤ò¥Á¥§¥Ã¥¯¤·¡¢
¡¡ // ¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹¡¦¥³¥ó¥Ü¥Ü¥Ã¥¯¥¹¡¦¥»¥ì¥¯¥È¥ê¥¹¥È¤ò»ÈÍÑÉÔǽ¤È¤¹¤ë
¡¡ function checkChkbox(){
¡¡¡¡chkList=[]; // ɬ¤º½é´ü²½¤¹¤ëɬÍפ¬¤¢¤ë
¡¡¡¡$("#fm2_725 input:checkbox:checked").map(function(){
¡¡¡¡¡¡chkList.push( this.value );
¡¡¡¡}); // ¥ª¥ó¤µ¤ì¤¿¥Á¥§¥Ã¥¯¥Ü¥Ã¥¯¥¹¥ê¥¹¥È¤òÇÛÎó chkList ¤Ë³ÊǼ
¡¡¡¡if (!chkList.length) { // No check »þ¤Ë¤Ï·Ù¹ð¤òȯ¤·¡¢¥¢¥Ë¥á¤òµ¯Æ°¤µ¤»¤Ê¤¤¡£
¡¡¡¡¡¡alert("¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤ò²¿¤« 1 ¤Ä°Ê¾å»ØÄꤷ¤Æ¤¯¤À¤µ¤¤");
¡¡¡¡¡¡return;
¡¡¡¡}
¡¡¡¡elementsDisabled("disabled"); //Á´¤Æ»ÈÍÑÉԲĤȤ¹¤ë
¡¡}
¡¡// °Ï¤ßÆâ¥Ü¥¿¥ó¤Î»ÈÍѲijÎǧ¤È¥Õ¥©¡¼¥àÍ×ÁǤΥ«¥Ð¡¼ÉÔÆ©ÌÀÅÙÀßÄê
¡¡$done.attr("disabled","");
¡¡$initAnim.attr("disabled","");
¡¡elementsDisabled("");¡¡// µ¯Æ°»þ¤Ë¤Ï form elements ¤òÁ´¤Æ»ÈÍѲÄǽ¤È¤¹¤ë
¡¡$.each([$shutter1,$shutter2,$shutter3],function(){
¡¡¡¡if (this.css("opacity")==1) this.css("opacity","0.5");
¡¡});
¡¡// 2 ¤Ä¤Î form Æâ¤Î¡¢2 ¤Ä¤Î¥Ü¥¿¥ó¤Î»ÈÍѲÄ/ÉԲľõÂÖ¤ÎÀßÄê¤È¥·¥ã¥Ã¥¿¡¼¥¢¥Ë¥á¤Îµ¯Æ°ÀßÄê
¡¡function setForm(type,duration,easing){
¡¡¡¡$done.attr("disabled",type);
¡¡¡¡$initAnim.attr("disabled",type);
¡¡¡¡var disp = (type==="disabled") ? "show" : "hide";
¡¡¡¡if ( disp=="show" && odd[0] !== odd[1] || disp=="hide" && !odd[0] === !odd[1] ){
¡¡¡¡¡¡¡¡$shutter1.animate({width:disp,height:disp},duration,easing);
¡¡¡¡¡¡¡¡$shutter2.animate({width:disp,height:disp},duration,easing);
¡¡¡¡}
¡¡¡¡$shutter3.animate({width:disp,height:disp},duration,easing);
¡¡}
¡¡// ¥¢¥Ë¥á¤¬Æ°ºîÃæ¤«Èݤ«¤ò³Îǧ¤·¡¢¾õÂ֤˱þ¤¸¤Æ form Í×ÁǤλÈÍÑÉÔ²Ä/²Ä¤òÀÚ¤êÂØ¤¨¤ë
¡¡function isbusy(){
¡¡¡¡ival =setInterval(function(){
¡¡¡¡¡¡if ( $box1.is(":animated") || $box2.is(":animated") || $box3.is(":animated") || $box4.is(":animated") ) {
¡¡¡¡¡¡¡¡setForm("disabled","slow",selEasing);
¡¡¡¡¡¡} else {
¡¡¡¡¡¡¡¡setForm("","slow",selEasing);
¡¡¡¡¡¡¡¡clearInterval(ival);
¡¡¡¡¡¡¡¡ival=undefined;
¡¡¡¡¡¡}
¡¡¡¡},20);
¡¡}
¡¡$done.toggle(function(){ // click toggle
¡¡¡¡odd[0]=!odd[0]; // ´ñ¿ô¤«¶ö¿ô¤«¤òȿž¤µ¤»¤ë
¡¡¡¡isbusy();
¡¡¡¡checkChkbox();
¡¡¡¡goAnima("toggle");
¡¡¡¡$done.attr("value","ºÇ¸å¤Þ¤Çư¤«¤¹");
¡¡¡¡$(this).blur();
¡¡},function(){ // ´ñ¿ô²óÌܤÏe.hide ¡¢¶ö¿ô²óÌܤÏe.show¥á¥½¥Ã¥É¤È¤Ê¤ë
¡¡¡¡if (isbusy()) return;
¡¡¡¡odd[1] = !odd[1]; // ´ñ¿ô¤«¶ö¿ô¤«¤òȿž¤µ¤»¤ë
¡¡¡¡for (var p in animaCSS) animaCSS[p] = odd[1] ? "hide" : null;
¡¡¡¡$.each([$box1,$box2,$box3,$box4],function(i,n){
¡¡¡¡¡¡if (!odd[1]) { // ¶ö¿ô²óÌܤĤޤê e.show ¥á¥½¥Ã¥É¤Î£²ÅÙÌܤε¯Æ°Á°¤Ë
¡¡¡¡¡¡¡¡for (var p in animaCSS) // ½ªÎ»Ãͤò¶¯À©Åª¤Ë¥¢¥Ë¥á³«»ÏÃͤȤ¹¤ë
¡¡¡¡¡¡¡¡¡¡animaCSS[p] = initCSS[i][p];
¡¡¡¡¡¡}
¡¡¡¡¡¡this.animate(animaCSS,dur,selEasing,function(){ // complete func¤ò»ØÄê
¡¡¡¡¡¡¡¡for (var j=0; j<attrs.length; j++) // CSS style ¥ª¥Ö¥¸¥§¥¯¥È¤Î³ÆÃͤò½é´üÃͤËÌ᤹¡£
¡¡¡¡¡¡¡¡¡¡$.attr(n.get(0).style, attrs[j] ,initCSS[i][attrs[j]]);
¡¡¡¡¡¡¡¡if (i==3) { // 75¡ó¥Ü¥Ã¥¯¥¹¤¬ºÇ¸å¤Þ¤Çɽ¼¨¤µ¤ì¤¿¤é
¡¡¡¡¡¡¡¡¡¡$done.attr("value",odd[1] ? "Do ɽ¼¨¥¢¥Ë¥á" : "Do ±£ÊÃ¥¢¥Ë¥á");
¡¡¡¡¡¡¡¡¡¡elementsDisabled(""); //Á´¤Æ»ÈÍѲĤȤ¹¤ë
¡¡¡¡¡¡¡¡}
¡¡¡¡¡¡});
¡¡¡¡});
¡¡¡¡$(this).blur();
¡¡});
})();
¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç¤Ï jquery.js ¤Ë¤ª¤±¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥É¤Î¤³¤ì¤Þ¤Ç¤Î²òÆÉ¤òƧ¤Þ¤¨¤Æ¡¢°ìÀ£°ì©¤¤¤ì¤ë¤³¤È¤È¤·¤Þ¤¹¡£¥¢¥Ë¥á¥µ¥ó¥×¥ë¤ò¿¿ôÍѰդ·¤Æ¡¢¤½¤Î²òÀâ¤ò»î¤ß¤Þ¤¹¡£
¤³¤³¤Ç¤¤¤¦¡¢¥Ü¥Ã¥¯¥¹¥¢¥Ë¥á¡¼¥·¥ç¥ó¤È¤Ï»ä¤¬¾¡¼ê¤Ë̾ÉÕ¤±¤¿Ì¾¾Î¤Ç¤¹¤¬¡¢ÇÛÃÖ»ØÄꤵ¤ì¤¿ div Í×ÁǤΥ¢¥Ë¥á¡¼¥·¥ç¥ó¤ò°ÕÌ£¤·¤Æ¤¤¤Þ¤¹¡£
¸Ä¡¹¤Î¥Ü¥Ã¥¯¥¹¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò 12 ¼ïÎà¡¢¤½¤Î¾¤³¤ì¤é¤Î¥Ü¥Ã¥¯¥¹¤òÍøÍѤ·¤¿¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò 6 ¼ïÎà¡¢·× 18 ¼ïÎà¤Î¥¢¥Ë¥á¤òºîÀ®¤·¡¢¤½¤Îµóư¤Ë´Ø¤¹¤ë²òÀâ¤ò¹Ô¤¤¡¢ËöÈø¤Ë¤ÏºîÀ®¤·¤¿¥¹¥¯¥ê¥×¥È¤òÉÕ¤±¤Þ¤·¤¿¡£
²¼¤Î¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È±£Êá¿É½¼¨¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬µ¯Æ°¤·¤Þ¤¹¡£ ³Æ¡¹¤Î¥Ü¥¿¥ó¤Ë¤Ï¡¢±£ÊäÈɽ¼¨¤Î 2 µ¡Ç½¤ò»ý¤¿¤»¤Þ¤·¤¿¡£
jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Î toggle ¥á¥½¥Ã¥É¤ÎÎã¤Ç¤¹¡£°ú¿ô¤Ê¤·¤Ç¤³¤Î¥á¥½¥Ã¥É¤òµ¯Æ°¤¹¤ë¤È¡¢$(htis).is(":hidden") ¥á¥½¥Ã¥É¤Ë¤è¤Ã¤ÆÅö³ºÍ×ÁǤα£ÊÃ/ɽ¼¨¾õÂÖ¤ò¥Á¥§¥Ã¥¯¤·¤Þ¤¹¡£
¤½¤Î·ë²Ì¤Ë±þ¤¸¤Æ¡¢¤â¤· true ¤Ê¤é¤Ð $(this).hide() ¤¬¡¢¤¢¤ë¤¤¤Ï false ¤Ê¤é¤Ð $(this).show() ¤¬¤½¤ì¤¾¤ìµ¯Æ°¤µ¤ì¡¢¤½¤ì¤¾¤ì¤Î¥á¥½¥Ã¥É¤Ë¤è¤Ã¤Æ¡¢this.style.display.none ¤È this.style.display.block ¤ÎÀÚ¤êÂØ¤¨¤¬¹Ô¤ï¤ì¡¢±£ÊäÈɽ¼¨¤¬¥¢¥Ë¥á¡¼¥È¤µ¤ì¤Þ¤¹¡£¡Ö»þ´Ö¡×¤Ë·¸¤ë¥³¡¼¥É¤ÏÁ´¤¯´Þ¤Þ¤ì¤Ê¤¤¤Î¤Ç¡¢½Ö»þ¤Ë¹Ô¤ï¤ì¤ëñ½ã¤Ê¥¢¥Ë¥á¤È¤Ê¤ê¤Þ¤¹¡£
1 ¤ÈƱ¤¸ jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Î toggle ¥á¥½¥Ã¥É¤ÎÎã¤Ç¤¹¤¬¡¢Æ°ºî»þ´Ö¤ò»ØÄꤷ¤¿°ú¿ô¤¬¤¢¤ëÅÀ¤¬°Û¤Ê¤ê¤Þ¤¹¡£
¤³¤Î°ú¿ô¤¬¤¢¤ë¤È toggle ¥á¥½¥Ã¥É¤ÎÄêµÁ¤«¤é animate(genFx("toggle",3),"slow") ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¡¢¤³¤Î genFx("toggle",3) ´Ø¿ô¼Â¹Ô¤Ë¤è¤Ã¤Æ margin¡¢padding µÚ¤Ó content ¥µ¥¤¥º¡Ê height ¤È width ¡ËÊÂ¤Ó¤Ë opacity ¤Î 4 ¤Ä¤Î¡Ê Àµ³Î¤Ë¤Ï margin ¤È padding ¤Ë¤Ï¤½¤ì¤¾¤ìº¸±¦¾å²¼¤¬¤¢¤ë¤Î¤Ç¡¢2¡ß4¡Ü3 ¤Ç 11¼ïÎà¤Î ¡Ë¥×¥í¥Ñ¥Æ¥£¤¬¥¢¥Ë¥á¡¼¥·¥ç¥óÂоݤȤʤê¤Þ¤¹¡£
¤³¤³¤Ç¶½Ì£¿¼¤¤¤³¤È¤Ï border ¤¬¥¢¥Ë¥áÂоݤˤʤäƤ¤¤Ê¤¤¤È¤¤¤¦¤³¤È¤Ç¤¹¡£ÅöÁ³¤Î¤³¤È¤Ç¤¹¤¬¡¢color ¥×¥í¥Ñ¥Æ¥£¤È°ã¤Ã¤Æ¡¢border ¤Ï jquery.js ¤Î¥¢¥Ë¥á¤ËÆëÀ÷¤Þ¤Ê¤¤Ìõ¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¡£¼ÂºÝ borderWidth ¤òÌäÂê¤Ê¤¯¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤È¤·¤Æ°·¤¨¤ë¤³¤È¤Ï¡¢¾å¤Î¥µ¥ó¥×¥ë 11¡õ12 ¤Ç¼¨¤·¤¿Ä̤ê¤Ç¤¹¡£
¢¨ ¼Â¤Ï color ¤ò¥¢¥Ë¥áÂоݤȤ¹¤ë jquery ³ÈÄ¥ÈÇ ui ¤¬¤¢¤ê¤Þ¤¹¡£effects.core.js ¤ÎÃæ¤Ë´Þ¤Þ¤ì¤Æ¤¤¤Þ¤¹¡£
¤½¤â¤½¤â¡¢border ¤Ë¤ÏÉý¤Î¾¤Ë¡¢Ãͤ¬¿ôÃͤǤϤʤ¤¿§¤È¥¹¥¿¥¤¥ë¤Î°À¤¬¤¢¤ê¤Þ¤¹¡£¤½¤Î¤¿¤á border ¤½¤Î¤â¤Î¤Ï¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤«¤é½ü³°¤·¤¿¤Î¤«¤â¤·¤ì¤Þ¤»¤ó¡£borderWidth ¤À¤±¤Ç¤â¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤Ë¤·¤Æ¤â¤ª¤«¤·¤¯¤Ê¤¤¤Ï¤º¤Ê¤Î¤Ç¤¹¤¬¡¢fxAttrs ¤ÎÂоݤˤ·¤Ê¤«¤Ã¤¿¤Î¤Ï¤É¤¦¤·¤Æ¤Ç¤·¤ç¤¦¤«¡£Íýͳ¤ÏȽÁ³¤È¤·¤Þ¤»¤ó¡£
¤µ¤Æ¡¢¾å¤Î 11 ¤Î¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤òÂоݤȤ·¤Æ¡¢animate ¥á¥½¥Ã¥É¤ÎÂô»³¤Î¥³¡¼¥É¤¬¿Ê¹Ô¤·¤Þ¤¹¡£animate ¥á¥½¥Ã¥É¤ÎÂè 1 °ú¿ô¤Ë genFx("toggle",3) ¤¬»ØÄꤵ¤ì¤¿¤³¤È¤Ë¤è¤ê¡¢jQuery.fx ¤Î¥¤¥ó¥¹¥¿¥ó¥¹ e ¤«¤é¡¢e.hide() ¤ä e.show() ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¡¢¤½¤³¤«¤é e.step() ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤Þ¤¹¡£
¤³¤¦¤·¤Æ¡¢11 ¤Î¥×¥í¥Ñ¥Æ¥£¤ÎÃͤ¬¡¢Åö½é¤Îɽ¼¨¾õÂÖÃÍ¤È 1 ¡Ê e.show() ¥á¥½¥Ã¥É¤Ë¤ª¤¤¤Æ width ¤È height ¥×¥í¥Ñ¥Æ¥£¤ò°·¤¦¾ì¹ç ¡Ë Ëô¤Ï 0 ¡Ê ¤½¤Î¾¤Î¥×¥í¥Ñ¥Æ¥£¤Î¾ì¹ç ¡Ë¤Î´Ö¤òÁ²¸º¡¿Á²Áý¤µ¤»¤é¤ì¤Æ¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬°ú¤µ¯¤³¤µ¤ì¤Þ¤¹¡£
ºÇ¸å¤Ë¡¢$().toggle(2000) ¥á¥½¥Ã¥É¤¬¡¢¥¢¥Ë¥áÂоÝÍ×ÁǤκ¸¾å¤Ë¼ýṲ́·¡¢¤½¤Îº¸¾å¤«¤éŸ³«¤µ¤ì¤ë¤³¤È¤Ëα°Õ¤¹¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£²¿¸Î¤Ê¤é¤Ð¡¢e.hide() ¤ä e.show() ¥á¥½¥Ã¥É¤Ï¡¢margin¡¢padding¡¢width¡¢height ¤ò 0 ¤Ë¡Ê e.show() ¥á¥½¥Ã¥É¤Î¾ì¹ç width ¤È height ¤Ï 1 ¤Ë ¡ËÁ«°Ü¤µ¤»¤ë¤Î¤Ç¤¹¤«¤é¡¢º¸¾å¤Ë¼ýṲ́·¤½¤³¤«¤éŸ³«¤¹¤ë¤³¤È¤Ë¤Ê¤ë¤Î¤Ç¤¹¡£
¹¹¤Ë¡¢¤³¤ì¤é¤Î¥á¥½¥Ã¥É¤ÏÉÔÆ©ÌÀÅÙ¤â 0 ¤È 1 ¤Î´Ö¤òÁ²¸º¡¿Á²Áý¤µ¤»¤ë¤¿¤á¡¢ÉÔÆ©ÌÀ¤ÈÆ©ÌÀ¤Î´Ö¤ò¹Ô¤Í褹¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
¤³¤³¤Ç¿¨¤ì¤¿¥¢¥Ë¥á¤Î½ªÅÀ/µ¯ÅÀ¤Î°ÌÃÖ»ØÄꤳ¤½¡¢animate ¥á¥½¥Ã¥É¤ò°·¤¦¾å¤Ç¤ÎºÇ¤â½ÅÍפʥݥ¤¥ó¥È¤Ç¤¹¡£
¥Ü¥Ã¥¯¥¹ 2 ¤Ç¤Ïº¸¾å¤¬¥¢¥Ë¥á¤Îµ¯½ªÅÀ¤Ç¤·¤¿¡£ÅöÁ³¤½¤Îµ¯½ªÅÀ°ÌÃÖ¤òÊѤ¨¤Æ¤ß¤¿¤¯¤Ê¤ê¤Þ¤¹¡£
¡Ö $().toggle ¥á¥½¥Ã¥É¤ò»È¤¦Á°Äó¤Ç¡¢¤É¤¦¤¹¤ì¤Ðµ¯½ªÅÀ°ÌÃÖ¤òÊѤ¨¤é¤ì¤ë¤«¡© ¡×¨¡¨¡¨¡¤«¤Ê¤êǺ¤ß¤Þ¤·¤¿¡£toggle ¥á¥½¥Ã¥É¤Ï e.show() ¤ä e.hide() ¥á¥½¥Ã¥É¤ò¸Æ¤Ó½Ð¤·¤Þ¤¹¤¬¡¢¤½¤ÎÃæ¤Ç¥×¥í¥Ñ¥Æ¥£ÃÍ¤Ï 0 Ëô¤Ï 1 ¤ËÊѹ¹¤µ¤ì¤Þ¤¹¡£¤Ä¤Þ¤êµ¯½ªÅÀ¤Ïº¸¾å¤Ç¤¹¡£¤½¤·¤Æ toggle ¥á¥½¥Ã¥É¤ÎÄêµÁ¤«¤é¡¢²¿¤é¤«¤Î°ú¿ô¤Ë¤è¤ê°ÌÃÖ»ØÄê¤òÊѤ¨¤ë¤³¤È¤ÏÉÔ²Äǽ¤Ç¤¹¡£·ë¶É¡¢°ÌÃÖ»ØÄê¤Ï toggle ¥á¥½¥Ã¥É¤Ç¤Ï¹Ô¤¨¤Þ¤»¤ó¡£¤³¤Î¥á¥½¥Ã¥É¤Ç¤Ïɬ¤ºº¸¾å¤Ë¼ýṲ́·¡¢¤½¤³¤«¤éŸ³«¤¹¤ë¥¢¥Ë¥á¤·¤«±é½Ð¤Ç¤¤Þ¤»¤ó¡£
¤½¤·¤Æ¤µ¤ó¤¶¤ó¹Í¤¨È´¤¤¤¿·ë²Ì¤Ä¤¤¤Ë...¡£
¡Ö °ÌÃÖ»ØÄê¤òÊ̤Υ᥽¥Ã¥É¤Ç¹Ô¤¤¡¢¤«¤Ä¤½¤ì¤ò toggle ¥á¥½¥Ã¥É¤ÈʹԵ¯Æ°¤¹¤ì¤Ð¤è¤¤¡×¨¡¨¡¨¡¤³¤Î¤³¤È¤Ëµ¤¤¬¤Ä¤¤Þ¤·¤¿¡£
µ¯½ªÅÀ°ÌÃÖ¤À¤±¤ò»ØÄꤹ¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¥á¥½¥Ã¥É¤Ï¡¢´ðËÜŪ¤Ë top¡¢left ¤Î½é´üÃͤȽªÎ»ÃͤòŬÀÚ¤ËÀßÄꤹ¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£¡Ê¥¢¥Ë¥áÂоÝÍ×ÁǤϰìÈÌ¤Ë position »ØÄê¤ò¡ÖÀäÂСפ«¡ÖÁêÂСפ˻ØÄꤷ¤Þ¤¹¤Î¤Ç top µÚ¤Ó left ¤¬»ØÄê¤Ç¤¤Þ¤¹¡£¡Ë
¶ñÂÎŪ¤ÊÂбþÊýË¡¤Ï¤³¤Î¥¨¥ó¥È¥ê¥¤ºÇ²¼Éô¤Ë·ÇºÜ¤·¤¿¥³¡¼¥É¤ò¸«¤ÆÂפ¯¤È¤·¤Æ¡¢¶ìÏ«¤·¤¿ÅÀ¤òµÏ¿¤·¤Æ¤ª¤¤Þ¤¹¡£
¥Ü¥¿¥ó¥¯¥ê¥Ã¥¯¤Ç¥¢¥Ë¥á¤òÎ嵯¤µ¤»¤Æ¤¤¤Þ¤¹¤¬¡¢¤½¤Î¥Ü¥¿¥ó¤Ï¥Ü¥Ã¥¯¥¹¤Îɽ¼¨¥¢¥Ë¥á¤Ë¤â¡¢¤¢¤ë¤¤¤Ï±£ÊÃ¥¢¥Ë¥á¤Ë¤â¡¢Î¾Åá»È¤¤¤¹¤ë¤è¤¦¤ËÀ߷פ·¤Æ¤¢¤ê¤Þ¤¹¡£
¤½¤·¤Æ¡¢½é´ü¾õÂÖ¤¬¥Ü¥Ã¥¯¥¹¤Îɽ¼¨¤È¤Ê¤Ã¤Æ¤¤¤ë¤Î¤Ç¤¹¤«¤é¡¢toggle ¥á¥½¥Ã¥É¤ÎÊ̤λȤ¤Êý¡Ê click ¤ÎÅÙ¤Ë 2 ¤Ä¤Î´Ø¿ô¤ò¸ò¸ß¤Ëµ¯Æ°¤¹¤ë toggle ¥á¥½¥Ã¥É ¡Ë¤òÍøÍѤ¹¤ëÊýË¡¤â¤¢¤ê¤Þ¤¹¡£¤·¤«¤·¤³¤³¤Ç¤Ï¡¢¤â¤Ã¤È°ìÈÌŪ¤ÊÊýË¡¤òõ¤ê¤Þ¤·¤¿¡£
¤³¤³¤ÇÄ󼨤·¤¿¥¢¥Ë¥á¥µ¥ó¥×¥ë¤Î¾ì¹ç¡¢¼ýÚÌ¡¿Å¸³«¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Îµ¯½ªÅÀ¡ÊÀþ¡Ë¤òƱ°ì¤Ë¤·¤Æ¤¢¤ê¤Þ¤¹¡£¤½¤ì¤¬¼«Á³¤À¤«¤é¤Ç¤¹¤¬¡¢Æ±°ì¤ÎÅÀ¤äÀþ¤«¤é»Ï¤Þ¤ê¡¿½ª¤ï¤ë¥¢¥Ë¥á¤Î¾ì¹ç¡¢¤½¤Î½é´üÃͤȽªÎ»ÃͤÏÀµÉé¤ÎÉ乿¤¬°Û¤Ê¤ëƱ°ì¤ÎÀäÂÐÃͤȤʤê¤Þ¤¹¡£¤½¤³¤Ç¡¢¥Ü¥¿¥ó¤Î¥¯¥ê¥Ã¥¯²ó¿ô¤¬´ñ¿ô²ó¤«¶ö¿ô²ó¤«¤Ë¤è¤Ã¤Æ¡¢³°¥µ¥¤¥º¼èÆÀÃͤÎÀµÉé¤òȿž¤µ¤»¤Æ¡¢µ¯½ªÅÀ¡Ê ¤¢¤ë¤¤¤Ïµ¯½ªÀþ ¡Ë°ÌÃ֤Ȥ¹¤ë¤è¤¦¥³¡¼¥Ç¥£¥ó¥°¤·¤Þ¤·¤¿¡£
º£Å٤ϥܥ寥¹¤Î±¦¾å¤òµ¯½ªÅÀ¤È¤¹¤ë¥¢¥Ë¥á¤Ç¤¹¡£style.top ¡Þ= 0 µÚ¤Ó style.left ¡Þ= box ³°Éý¤«¤é¡¢µ¯½ªÅÀÃͤò½Ð¤·¤Þ¤·¤¿¡£
±£ÊÃ/ɽ¼¨¤Î¥È¥°¥ëµ¯Æ°¤Ï 3 ¤ÈƱÍͤδñ¿ô²ó/¶ö¿ô²ó¤Ë¤è¤ëÊýË¡¤ÇÂн褷¤Þ¤·¤¿¡£°Ê²¼ 5¡¢6 ¶¦Æ±ÍÍ¡£
¥Ü¥Ã¥¯¥¹¤Î±¦²¼¤òµ¯½ªÅÀ¤È¤¹¤ë¥¢¥Ë¥á¤Ç¤¹¡£style.top ¡Þ= box ³°¹â¤µµÚ¤Ó style.left ¡Þ= box ³°Éý¤«¤é¡¢µ¯½ªÅÀÃͤò½Ð¤·¤Þ¤·¤¿¡£
¥Ü¥Ã¥¯¥¹¤Îº¸²¼¤òµ¯½ªÅÀ¤È¤¹¤ë¥¢¥Ë¥á¤Ç¤¹¡£style.top ¡Þ= ¥Ü¥Ã¥¯¥¹³°¹â¤µ µÚ¤Ó style.left ¡Þ= 0 ¤Ë¤è¤êµ¯½ªÅÀÃͤò½Ð¤·¤Þ¤·¤¿¡£
¤³¤³¤«¤é¥¢¥Ë¥á¤Î¼ñ¤¬ÊѤï¤ê¤Þ¤¹¡£¤³¤ì¤Þ¤Ç¤ÏÁ´¤Æ $().toggle ¥á¥½¥Ã¥É¤òÍøÍѤ·¤Æ¤¤Þ¤·¤¿¡£µ¯½ªÅÀ°ÌÃÖ¤ò ¡Ê 0, 0 ¡Ë °Ê³°¤È¤¹¤ë¤¿¤á¤Ë animate ¥á¥½¥Ã¥É¤òÊ»¹Ôµ¯Æ°¤µ¤»¤¿¾ì¹ç¤â¡¢Á´¤Æ toggle ¥á¥½¥Ã¥É¤È¤ÎÊ»¹Ôµ¯Æ°¤Ç¤·¤¿¡£
¤È¤³¤í¤¬ 7¡¢8¡¢10 ¡Á 12 ÈÖÌܤΥµ¥ó¥×¥ë¤Ï toggle ¥á¥½¥Ã¥É¤ò»È¤Ã¤Æ¤¤¤Þ¤»¤ó¡£Ã¢¤·¡¢12 ÈÖÌܤΥµ¥ó¥×¥ë°Ê³°¤Ï¥¢¥Ë¥áÍÑ CSS ¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£Ãͤò "toggle" ¤È¤·¤Æ¤¤¤Þ¤¹¤Î¤Ç¡¢¥×¥í¥Ñ¥Æ¥£Ãͤò "toggle" ¤È¤·¤¿¾ì¹ç¤Î animate ¥á¥½¥Ã¥É¤Î¥³¡¼¥Ç¥£¥ó¥°¤Ë¤è¤Ã¤Æ¡¢ÉÔÆ©ÌÀÅ٤ϥ¢¥Ë¥áÂоݤˤʤê¤Þ¤»¤ó¤¬¡¢½Ì¾®¤¹¤ë¥¢¥Ë¥á¤Î¾ì¹ç¤Ë¤Ïɬ¤ººÇ¸å¤Ë¾ÃÌǤ·¡¢Å¸³«¤¹¤ë¾ì¹ç¤Ë¤ÏºÇ½é¤Ëɽ¼¨¤µ¤ì¤Þ¤¹¡£
¤µ¤Æ¡¢7 ÈÖÌܤΥµ¥ó¥×¥ë¤Ç¤Ï¡¢½ÄÊý¸þ¤Î¥µ¥¤¥º¤Ë·¸¤ë¥×¥í¥Ñ¥Æ¥£¤À¤±¡Ê height¡¢marginTop¡¢marginBottom¡¢paddingTop µÚ¤Ó paddingBottom ¡Ë¤ò¥¢¥Ë¥áÂоݤȤ·¤¿¾å¤Ç¡¢¹¹¤Ëʸ»ú¥µ¥¤¥º¤â¥¢¥Ë¥áÂоݤËÄɲ䷤Ƥߤޤ·¤¿¡£
µ¯¤³¤µ¤ì¤ë¥¢¥Ë¥á¤Ï slideUp ¥á¥½¥Ã¥É¤Ë¹ó»÷¤·¤Æ¤¤¤Þ¤¹¤¬¡¢slideUp ¥á¥½¥Ã¥É¤Ï»ÈÍѤ»¤º¡¢fxAttrs ÇÛÎó¤ò³ÈÄ¥¤·¤¿ exAttrs ¤È¡¢genFx ¤ÈÁ´¤¯Æ±°ì¤Ê Fx ¥á¥½¥Ã¥É¤ò»ÈÍѤ·¤Æ¥¢¥Ë¥á¡¼¥È¤µ¤»¤Þ¤·¤¿¡£
¡Ê ¤³¤³¤ËÆÈ¼«¤ËÄêµÁ¤·¤¿ÇÛÎó¤È¥á¥½¥Ã¥É¤Ï¡¢¶¦¤Ë̵̾´Ø¿ôÆâ¤Î¥í¡¼¥«¥ëÊÑ¿ô¤È¤·¤Þ¤·¤¿¡£¡Ë
7 ¤ÎÊÑ·Á¤Ç¥Ü¥Ã¥¯¥¹º¸Êդ˾ö¤ß¹þ¤ß¡¢¤½¤³¤«¤é³ÈÉý¤¹¤ë¥á¥½¥Ã¥É¤Ç¤¹¡£Ê¸»ú¥µ¥¤¥º¤Ï¥¢¥Ë¥áÂоݤȤ·¤Æ¤¤¤Þ¤»¤ó¡£¥¢¥Ë¥áÍÑ¥×¥í¥Ñ¥Æ¥£ÃÍ¤Ë "toggle" ¤ò»ØÄꤷ¤Æ¤¤¤ë¤Î¤Ç¡¢½Ì¾®¸å¤Ë±£Ê䵤ì¡Ê display.none ¡Ë¡¢Å¸³«Ä¾Á°¤Ëɽ¼¨¤¬ºÆ³«¡Ê display.block ¡Ë¤µ¤ì¤Þ¤¹¡£
¤³¤Î¥¢¥Ë¥á¤â exAttrs ¤È Fn ¤ò³èÍѤ·¤Æ¶Ë¤á¤ÆÃ»¤¤¥³¡¼¥Ç¥£¥ó¥°¤Çºî¤ê¤Þ¤·¤¿¡£¥Ü¥Ã¥¯¥¹ 2 ¤Îµóư¤Ëʸ»ú¤ÎÊѲ½¤ò²Ã¤¨¤¿¤â¤Î¤Ç¤¹¡£
¥¢¥Ë¥á¥×¥í¥Ñ¥Æ¥£¤È¤·¤Æ width ¤À¤±¤òÂоݤȡ¢animate ¥á¥½¥Ã¥É¤ÎÂè 1 °ú¿ô¤Ç¤¢¤ë¥¢¥Ë¥áÍÑ CSS ¥×¥í¥Ñ¥Æ¥£Ãͤò "toggle" ¤È¤·¤Þ¤·¤¿¡£½¾¤Ã¤Æ¡¢ÉÔÆ©ÌÀÅ٤ϥ¢¥Ë¥áÂоݤȤϤʤê¤Þ¤»¤ó¤¬¡¢½Ì¾®¸å¤Ë±£Ê䵤졢Ÿ³«Ä¾Á°¤Ëɽ¼¨¤¬ºÆ³«¤µ¤ì¤Þ¤¹¡£
jquery.js ¤Ç¤Ï borderWidth ¤òɸ½àŪ¤Ê¥¢¥Ë¥áÁàºîÂоݤȤ·¤Æ¤¤¤Ê¤¤¤Î¤Ç¡¢´º¤¨¤Æ¤½¤ì¤òÂоݤȤ·¤¿¥¢¥Ë¥á¤òºî¤Ã¤Æ¤ß¤Þ¤·¤¿¡£
¤³¤³¤Ç¤â¡¢animate ¥á¥½¥Ã¥É¤ÎÂè 1 °ú¿ô¤Ç¤¢¤ë¥¢¥Ë¥áÍÑ CSS ¥×¥í¥Ñ¥Æ¥£Ãͤò "toggle" ¤È¤·¤¿¤Î¤Ç¡¢ÉÔÆ©ÌÀÅ٤ϥ¢¥Ë¥áÂоݤȤϤʤê¤Þ¤»¤ó¤¬¡¢³°ÏÈÀþ¤¬ºÙ¤¯¤Ê¤Ã¤Æ¤¤¤Ã¤ÆºÇ½ªÅª¤Ë¥Ü¥Ã¥¯¥¹¤Ï hide ¤µ¤ì¡¢Â¾Êý¡¢ÏÈÀþ¤¬ÂÀ¤¯¤Ê¤ëÁ°¤Ë¥Ü¥Ã¥¯¥¹¤¬ show ¤µ¤ì¤Þ¤¹¡£
ºÇ¸å¤Î¥µ¥ó¥×¥ë¤Ï¥Ü¡¼¥À¡¼¥µ¥¤¥º¤À¤±¤ò animete ¥á¥½¥Ã¥É¤ÎÂоݤȤ·¡¢¤«¤Ä¡¢toggle Ãͤò»È¤Ã¤Æ¤¤¤Ê¤¤¤Î¤Ç¡¢border Éý¤¬¥¼¥í¤Ë½Ì¾®¤µ¤ì¤Æ¤â·è¤·¤Æ¥Ü¥Ã¥¯¥¹¤Ï±£Ê䵤ì¤Þ¤»¤ó¡£
¤Þ¤¿¡¢animate ¥á¥½¥Ã¥É¤ÎÂè 2 °ú¿ô speed ¤ò¥ª¥Ö¥¸¥§¥¯¥È¤È¤·¤Æ»ØÄꤷ¡¢¤³¤Î¥µ¥ó¥×¥ë¤À¤±Í£°ì e.options.step ¥á¥½¥Ã¥É¤òÍøÍѤ·¤Æ¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Îµ¯Æ°²ó¿ô¤ò¥«¥¦¥ó¥È¤µ¤»¤Þ¤·¤¿¡£¤³¤¦¤·¤Æ 12 ¤Î¥µ¥ó¥×¥ë¤ÎÃæ¤ÇºÇ¤â¥«¥¹¥¿¥Þ¥¤¥ºÅ٤ι⤤¤â¤Î¤Ë¤Ê¤ê¤Þ¤·¤¿¡£
¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òµ¯Æ°¤¹¤ë¤È¡¢µ¯Æ°²ó¿ô¤¬¥Ü¥Ã¥¯¥¹Æâʸ»úÎó¤ÎºÇ¸å¤ËÄɲ䵤졢¥¹¥È¥Ã¥×¥¦¥©¥Ã¥Á¤Î¤è¤¦¤Ë¥«¥¦¥ó¥¿¿ô¤¬ÊѲ½¤·¤Þ¤¹¡£
¤³¤Î animate ¥á¥½¥Ã¥É¤Ç¤Ï¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤ò 4 ¤Ä»ØÄꤷ¤Æ¤¤¤Þ¤¹¤Î¤Ç¡¢³Æ¥×¥í¥Ñ¥Æ¥£Ëè¤Îµ¯Æ°²ó¿ô¤Ï¡¢¥«¥¦¥ó¥¿Ãͤò 4 ¤Ç³ä¤ì¤Ð»»½Ð¤Ç¤¤Þ¤¹¡£
¤Ê¤ª¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Îµ¯Æ°²ó¿ô¤Ï¡¢duration »ØÄê»þ´Ö¡¢CPU ¤ÎÀǽ¡¢¥á¥â¥ê¤Î¶õ¤¶ñ¹ç¡¢¥Ö¥é¥¦¥¶¤Î Javascript ²òÀÏ/¼Â¹ÔÀǽÅù¤Ëº¸±¦¤µ¤ì¤Þ¤¹¤«¤é¡¢Æ±¤¸ duration »ØÄê¤Ç¤¢¤Ã¤Æ¤â¥Ö¥é¥¦¥¶¤È¥Ñ¥½¥³¥ó¤ÎÀǽËè¤Ë°Û¤Ê¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
12 ÈÖÌܤޤǤΥµ¥ó¥×¥ë¤ò°ìÀƤ˥¢¥Ë¥á¡¼¥·¥ç¥ó¤µ¤»¤¿¤¤¤È»×¤¤¡¢¤½¤ì¤ò¼Â¹Ô¤·¤Þ¤·¤¿¡£
¥¹¥¯¥ê¥×¥È¤Ï¡¢¥Ü¥¿¥ó click ¥á¥½¥Ã¥É¤Î°ú¿ô¤Ë¤ª¤¤¤Æ¡¢³Æ¥¢¥Ë¥áµ¯Æ°´Ø¿ô¤òÂоݤȤ·¤Æ each ¥á¥½¥Ã¥É¤Ç½ä²ó½èÍý¤·¤Æ¤¤¤ë¤À¤±¤Ç¤¹¡£
12 ÈÖÌܤޤǤΥµ¥ó¥×¥ë¤ò°ìÀƤ˥¢¥Ë¥á¡¼¥·¥ç¥ó¤µ¤»¤¿¼¡¤Ë¤Ï¡¢°ìÀƤǤϤʤ¯½ç¼¡µ¯Æ°¤µ¤»¤ë¤³¤È¤â¤ª¤â¤·¤í¤¤¡¢¤È»×¤¤Î©¤Á¤½¤ì¤ò¼Â¹Ô¤·¤Þ¤·¤¿¡£
¥¹¥¯¥ê¥×¥È¤Ç¤Ï¡¢¥Ü¥¿¥ó click ¥á¥½¥Ã¥É¤Î°ú¿ô¤Ë¤ª¤±¤ë 12 ÈÖÌܤޤǤΥ¢¥Ë¥áµ¯Æ°´Ø¿ô¤ò¡¢setTimeout ´Ø¿ô¤ò»È¤Ã¤Æ°ìÄê´Ö³Ö¤ÇÃٱ䤵¤»¤Ê¤¬¤é½ä²ó½èÍý¤·¤Þ¤·¤¿¡£
°ìÀƵڤӽ缡µ¯Æ°¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¼¡¤Ë¤Ï¡¢Íð¿ô´Ø¿ô¤ò»È¤Ã¤ÆÇ¤°Õ¤Ë 2 ¤Ä¤Î¥Ü¥Ã¥¯¥¹¤òÁªÂò¤µ¤»¡¢¤½¤ì¤é¤Î°ÌÃÖ¤ò¸ß¤¤¤ËÆþ¤ìÂØ¤¨¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¹Í¤¨¤Þ¤·¤¿¡£2 ¤Ä¤Î¥Ü¥Ã¥¯¥¹¤Î top ÃÍ¤È left ÃͤòÁê¸ß¤ËÆþ¤ìÂØ¤¨¤ë¤À¤±¤Ê¤Î¤Ç·è¤·¤ÆÊ£»¨¤Ê¥³¡¼¥Ç¥£¥ó¥°¤ÏÍפê¤Þ¤»¤ó¡£
¤Ê¤ª¡¢¤³¤³¤Ç¤Ï ÃÆÀŪư¤¤ò°ú¤µ¯¤³¤¹ easing ´Ø¿ô¤òºÎÍѤ·¤Æ¤ß¤Þ¤·¤¿¡£¤³¤Î·ë²Ì¡Ö¥¤¥ä¥¤¥ä¤·¤Ê¤¬¤é»ÅÊý¤Ê¤¯°Üư¤¹¤ë¡×¤è¤¦¤Êư¤¤È¤Ê¤ê¤Þ¤·¤¿(ÇúÇúWWW)
2 ¤Ä¤Î¥Ü¥Ã¥¯¥¹Æþ¤ìÂØ¤¨¤ò¤ä¤Ã¤Æ¤ß¤¿¤é¡¢¤â¤Ã¤È¿¤¯¤Î¥Ü¥Ã¥¯¥¹¤òƱ»þ¤ËÆþ¤ìÂØ¤¨¤Æ¤ß¤¿¤¤¤È»×¤¤¡¢¤½¤ì¤ò¼Â¸½¤·¤Þ¤·¤¿¡£
Ãí°Õ¤·¤¿ÅÀ¤Ï¡¢É¬¤º °Û¤Ê¤ë 6 ¤Ä¤Î¥Ü¥Ã¥¯¥¹¤òÁªÂò¤µ¤»¤Ê¤±¤ì¤Ð¤Ê¤é¤Ê¤¤¡¢¤È¤¤¤¦¤³¤È¤Ç¤¹¡£1 ¡Á 12 Ëø¤ÎÍð¿ô¤òÍð¿ô´Ø¿ô¤ÇȯÀ¸¤µ¤»¡¢¤½¤Î¤¦¤Á¤Î 6 ¸Ä¤ò»È¤¦¤ï¤±¤Ç¤¹¤«¤é¡¢´Ø¿ô¤«¤é¤ÎÊÖÃͤ¬Æ±¤¸Ãͤˤʤë²ÄǽÀ¤ÏÈó¾ï¤Ë¹â¤¤¤ï¤±¤Ç¤¹¡£
ÂçÊѾéĹ¤Ê¥³¡¼¥É¤Ë¤Ê¤ê¤Þ¤·¤¿¤¬¡¢ÊÖÃͤˤĤ¤¤Æ 1 ¤Ä¤º¤ÄƱ¤¸¤«¤É¤¦¤«¥Á¥§¥Ã¥¯¤·¡¢Æ±¤¸¾ì¹ç¤Ë¤ÏÍð¿ôȯÀ¸¤ò¤ä¤êľ¤·¤Æ¡¢É¬¤º 6 ¤Ä¤ÎÃͤ¬°Û¤Ê¤ë¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£
¤Ê¤ª¡¢À޳Ѥε¡²ñ¤Ê¤Î¤Ç easing ´Ø¿ô¤ÏÁ´¤Æ°Û¤Ê¤ë¤â¤Î¤ò»È¤Ã¤Æ¤ß¤Þ¤·¤¿¡£
¹¹¤Ë¡¢¥Ü¥Ã¥¯¥¹Æþ¤ìÂØ¤¨¤òƱ»þ¤Ë¤Ç¤Ï¤Ê¤¯¡¢¥¿¥¤¥à¥é¥°¤ò»ý¤¿¤»¤Æ¼Â¹Ô¤·¤Æ¤ß¤¿¤¤¡¢¤È»×¤¤¤½¤ì¤ò¼Â¸½¤·¤Þ¤·¤¿¡£
¥¿¥¤¥à¥é¥°¤Ï setTimeout ´Ø¿ô¤Ç animate ¥á¥½¥Ã¥É¤Îµ¯Æ°¤òÃٱ䤵¤»¤Æ¼Â¸½¤·¤Þ¤·¤¿¡£
12 ¸ÄÁ´¤Æ¤Î¥Ü¥Ã¥¯¥¹¤ò½Ö»þ¤ËÈÖ¹æ½ç¤ËÀ°Îó¤·¤Þ¤¹¡£¥Ü¥Ã¥¯¥¹¤ÎÈÖ¹æ¤òÍê¤ê¤Ë top ÃÍ¤È left Ãͤò»»½Ð¤¹¤ëÂå¿ô¼°¤ò¹Í¤¨¡¢¥³¡¼¥Ç¥£¥ó¥°¤·¤ÆÁ´¥Ü¥Ã¥¯¥¹¤ò½Ö»þ¤ËÀ°Î󤹤ë¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£Æþ¤ìÂØ¤ï¤Ã¤¿²Õ½ê¤À¤±¤ò¸µ¤ËÌ᤹¤Î¤ÏÂçÊѤʤΤǡ¢´ÊÊØ¤Ç°Â°×¤ÊÊýË¡¤òºÎÍѤ·¤Þ¤·¤¿¡Ê¡°¡°¡¨¡£
¢£ ¥¹¥¿¥¤¥ëÀßÄê
¡¡#animArea {
¡¡¡¡width:485px; height:440px;margin-top:1em;
¡¡¡¡position:relative; background:lightcyan;
¡¡¡¡padding:10px;
¡¡¡¡text-align:center;
¡¡¡¡line-height:1.2em;
¡¡}
¡¡button.btn {margin:5px; overflow:visible; padding:2px;}
¡¡#box1_724, #box2_724, #box3_724, #box4_724, #box5_724, #box6_724,
¡¡#box7_724, #box8_724, #box9_724, #box10_724, #box11_724, #box12_724 {
¡¡¡¡position:absolute;left:10px;
¡¡¡¡margin:10px 10px 10px 10px;
¡¡¡¡border:palegoldenrod 10px ridge;
¡¡¡¡padding:5px;
¡¡¡¡width:110px; height:60px;
¡¡¡¡background:royalblue;
¡¡}
¡¡#box4_724, #box5_724, #box6_724 {
¡¡¡¡top:120px;
¡¡}
¡¡#box7_724, #box8_724, #box9_724 {
¡¡¡¡top:230px;
¡¡}
¡¡#box10_724, #box11_724, #box12_724 {
¡¡¡¡top:340px;
¡¡}
¡¡#box2_724, #box5_724, #box8_724, #box11_724 {
¡¡¡¡left:170px;
¡¡¡¡border:lightblue 10px outset;
¡¡}
¡¡#box3_724, #box6_724, #box9_724, #box12_724 {
¡¡¡¡left:330px;
¡¡¡¡border:plum 10px inset;
¡¡}
¢£Javascript
(function(){
¡¡var exAttrs = [
¡¡¡¡// height animations
¡¡¡¡[ "height", "marginTop", "marginBottom", "paddingTop",
¡¡¡¡¡¡"paddingBottom", "borderTopWidth","borderBottomWidth" ],
¡¡¡¡// width animations
¡¡¡¡[ "width", "marginLeft", "marginRight", "paddingLeft",
¡¡¡¡¡¡"paddingRight", "borderLeftWidth","borderRightWidth" ],
¡¡¡¡// opacity animations
¡¡¡¡[ "opacity" ],
¡¡¡¡// fontsize animations
¡¡¡¡[ "fontSize" ]
¡¡];
¡¡function Fn( type, num ){
¡¡¡¡var obj = {};
¡¡¡¡jQuery.each( exAttrs.concat.apply([], exAttrs.slice(0,num)), function(){
¡¡¡¡¡¡obj[ this ] = type;
¡¡¡¡});
¡¡¡¡return obj;
¡¡}
¡¡var i=1,j=13,$btn=[],$box=[],hidden=[],even=[],w=[],h=[],flag=[],duration=2000;
¡¡for (; i<j; i++) {
¡¡¡¡$btn[i] = $("#btn" + i +"_724");
¡¡¡¡$box[i] = $("#box" + i + "_724");
¡¡¡¡hidden[i] = $box[i].is(":hidden");
¡¡¡¡w[i] = !hidden[i] && $box[i].outerWidth() || 0;
¡¡¡¡h[i] = !hidden[i] && $box[i].outerHeight() || 0;
¡¡¡¡flag[i]=0;
¡¡}
¡¡for (var i=13; i<19; i++) {
¡¡¡¡$btn[i] = $("#btn" + i +"_724");
¡¡}
¡¡$("button.btn").hover(
¡¡ function(){$(this).css("background-color","paleturquoise")},
¡¡ function(){$(this).css("background-color","")}
¡¡).toggle(
¡¡¡¡function(){$(this).css("background-color","thistle")},
¡¡¡¡function(){$(this).css("background-color","palegreen")}
¡¡);
¡¡if(!$box[12].is(":hidden")) {
¡¡¡¡var bordLeft = $box[12].css("border-left-width"),
¡¡¡¡bordRight = $box[12].css("border-right-width"),
¡¡¡¡bordTop = $box[12].css("border-top-width"),
¡¡¡¡bordBottom = $box[12].css("border-bottom-width");
¡¡}
¡¡$box[12].append("<span/>");
¡¡function anim1(){$box[1].toggle();}
¡¡function anim2(){$box[2].toggle(duration);}
¡¡function anim3(){
¡¡¡¡var even = ++flag[2] % 2 === 0,
¡¡¡¡¡¡leftAnim=( ( hidden[3] + even ) ? "-=": "+=" ) + w[3]/2 +"px",
¡¡¡¡¡¡topAnim=( ( hidden[3] + even ) ? "-=" : "+=" ) + h[3]/2 +"px";
¡¡¡¡$box[3].toggle({queue:false,duration:duration})
¡¡¡¡¡¡.animate( {left:leftAnim, top:topAnim},duration );
¡¡}
¡¡function anim4(){
¡¡¡¡var even = ++flag[3] % 2 === 0,
¡¡¡¡¡¡leftAnim=( ( hidden[4] + even ) ? "-=": "+=" ) + w[4] +"px";
¡¡¡¡$box[4]
¡¡¡¡¡¡.animate( {left:leftAnim},{queue:false,duration:duration} )
¡¡¡¡¡¡.toggle(duration);
¡¡}
¡¡function anim5(){
¡¡¡¡var even = ++flag[5] % 2 === 0,
¡¡¡¡¡¡leftAnim=( ( hidden[5] + even ) ? "-=": "+=" ) + w[5] +"px",
¡¡¡¡¡¡topAnim=( ( hidden[5] + even ) ? "-=" : "+=" ) + h[5] +"px";
¡¡¡¡$box[5]
¡¡¡¡¡¡.animate( {left:leftAnim, top:topAnim},{queue:false,duration:duration} )
¡¡¡¡¡¡.toggle(duration);
¡¡}
¡¡function anim6(){
¡¡¡¡var even = ++flag[6] % 2 === 0,
¡¡¡¡¡¡topAnim=( ( hidden[6] + even ) ? "-=" : "+=" ) + h[6] +"px";
¡¡¡¡$box[6]
¡¡¡¡¡¡.animate( {top:topAnim},{queue:false,duration:duration} )
¡¡¡¡¡¡.toggle(duration);
¡¡}
¡¡function anim7(){$box[7].animate(
¡¡¡¡$.extend(Fn("toggle",1),{fontSize:"toggle"}),duration
¡¡)}
¡¡function anim8(){$box[8].animate({
¡¡¡¡width:"toggle",marginLeft:"toggle",marginRight:"toggle",
¡¡¡¡paddigLeft:"toggle",paddingRight:"toggle",borderLeftWidth:"toggle",
¡¡¡¡borderRightWidth:"toggle"},duration
¡¡)}
¡¡function anim9(){$box[9].animate(Fn("toggle",4),duration);}
¡¡function anim10(){$box[10].animate({width:"toggle"},duration)}
¡¡function anim11(){$box[11].animate({
¡¡¡¡borderLeftWidth:"toggle", borderRightWidth:"toggle",
¡¡¡¡borderTopWidth:"toggle", borderBottomWidth:"toggle"
¡¡},duration)}
¡¡function anim12(){
¡¡¡¡var k=0, even = ++flag[12] % 2 === 0,
¡¡¡¡leftAnim = (( hidden[12] + even ) ? "+=": "-=") + bordLeft;
¡¡¡¡rightAnim = (( hidden[12] + even ) ? "+=": "-=") + bordRight;
¡¡¡¡topAnim = (( hidden[12] + even ) ? "+=": "-=") + bordTop;
¡¡¡¡bottomAnim = (( hidden[12] + even ) ? "+=": "-=") + bordBottom ;
¡¡¡¡$box[12].animate({
¡¡¡¡¡¡¡¡borderLeftWidth :leftAnim, borderTopWidth:topAnim,
¡¡¡¡¡¡¡¡borderRightWidth:rightAnim, borderBottomWidth:bottomAnim
¡¡¡¡¡¡},{
¡¡¡¡duration:duration, step : function(){k++; $(this).children().text(k);}
¡¡¡¡¡¡}
¡¡¡¡);
¡¡}
¡¡var animList =[anim1,anim2,anim3,anim4,anim5,anim6,anim7,anim8,anim9,anim10,anim11,anim12];
¡¡$.each(animList,function(i,n){ $btn[i+1].click(n) });
¡¡$btn[13].click(function(){$.each(animList,function(i,n){n()})});
¡¡$btn[14].click(function(){
¡¡¡¡$.each(animList,function(i,n){setTimeout(n,400*i)})
¡¡});
¡¡// Íð¿ô¤ò»È¤Ã¤Æ 2 ¤Ä¤Î¥Ü¥Ã¥¯¥¹¤Î°ÌÃÖ¤ò¸ò´¹¤¹¤ë
¡¡$btn[15].click(function(){
¡¡¡¡var A = parseInt(Math.random()*12)+1,
¡¡¡¡¡¡¡¡B = parseInt(Math.random()*12)+1,posA={},posB={};
¡¡¡¡while ( A===B ){
¡¡¡¡¡¡¡¡B = parseInt(Math.random()*12)+1;
¡¡¡¡¡¡¡¡if (A!==B) break;
¡¡¡¡}
¡¡¡¡var $boxA=$("#box"+A+"_724"),$boxB=$("#box"+B+"_724");
¡¡¡¡$boxA.animate({top:$boxB.css("top"),left:$boxB.css("left")},duration,"easeInOutBounce");
¡¡¡¡$boxB.animate({top:$boxA.css("top"),left:$boxA.css("left")},duration,"easeInOutElastic");
¡¡});
¡¡// Íð¿ô¤ò»È¤Ã¤Æ 6 ¤Ä¤Î¥Ü¥Ã¥¯¥¹°ÌÃÖ¤ò°ì½Ö¤ÇÆþ¤ìÂØ¤¨¤ë
¡¡$btn[16].click(function(){
¡¡¡¡var A = parseInt(Math.random()*12)+1,
¡¡¡¡¡¡B = parseInt(Math.random()*12)+1,
¡¡¡¡¡¡C = parseInt(Math.random()*12)+1,
¡¡¡¡¡¡D = parseInt(Math.random()*12)+1,
¡¡¡¡¡¡E = parseInt(Math.random()*12)+1,
¡¡¡¡¡¡F = parseInt(Math.random()*12)+1,
¡¡¡¡¡¡posA={},posB={},posC={},posD={},posE={},posF={};
¡¡¡¡while ( A===B ){
¡¡¡¡¡¡B = parseInt(Math.random()*12)+1;
¡¡¡¡¡¡if (A!==B) break;
¡¡¡¡}
¡¡¡¡while ( C===A || C===B){
¡¡¡¡¡¡C = parseInt(Math.random()*12)+1;
¡¡¡¡¡¡if (C!==A &&C!==B) break;
¡¡¡¡}
¡¡¡¡while ( D===A || D==B || D===C){
¡¡¡¡¡¡D = parseInt(Math.random()*12)+1;
¡¡¡¡¡¡if (D!==A && D!==B && D!==C) break;
¡¡¡¡}
¡¡¡¡while ( E===A || E==B || E===C || E===D){
¡¡¡¡¡¡E = parseInt(Math.random()*12)+1;
¡¡¡¡¡¡if (E!==A && E!==B && E!==C && E!==D) break;
¡¡¡¡}
¡¡¡¡while ( F===A || F==B || F===C || F===D || F===E){
¡¡¡¡¡¡F = parseInt(Math.random()*12)+1;
¡¡¡¡¡¡if (F!==A && F!==B && F!==C && F!==D && F!==E) break;
¡¡¡¡}
¡¡¡¡var $boxA=$("#box"+A+"_724"), $boxB=$("#box"+B+"_724"),
¡¡¡¡¡¡$boxC=$("#box"+C+"_724"), $boxD=$("#box"+D+"_724"),
¡¡¡¡¡¡$boxE=$("#box"+E+"_724"), $boxF=$("#box"+F+"_724");
¡¡¡¡$boxA.animate({top:$boxB.css("top"),left:$boxB.css("left")},duration,"easeInOutBounce");
¡¡¡¡$boxB.animate({top:$boxA.css("top"),left:$boxA.css("left")},duration,"easeInOutElastic");
¡¡¡¡$boxC.animate({top:$boxD.css("top"),left:$boxD.css("left")},duration,"easeInOutExpo");
¡¡¡¡$boxD.animate({top:$boxC.css("top"),left:$boxC.css("left")},duration,"easeInOutQuart");
¡¡¡¡$boxE.animate({top:$boxF.css("top"),left:$boxF.css("left")},duration,"easeInOutCirc");
¡¡¡¡$boxF.animate({top:$boxE.css("top"),left:$boxE.css("left")},duration,"easeInOutBack");
¡¡});
¡¡// ¥Ü¥Ã¥¯¥¹°ÌÃÖ¸ò´¹¤ò¥¿¥¤¥à¥é¥°¤ò»ý¤¿¤»¤Æ¹Ô¤¦
¡¡$btn[17].click(function(){
¡¡¡¡var A = parseInt(Math.random()*12)+1,
¡¡¡¡¡¡¡¡B = parseInt(Math.random()*12)+1,
¡¡¡¡¡¡¡¡C = parseInt(Math.random()*12)+1,
¡¡¡¡¡¡¡¡D = parseInt(Math.random()*12)+1,
¡¡¡¡¡¡¡¡E = parseInt(Math.random()*12)+1,
¡¡¡¡¡¡¡¡F = parseInt(Math.random()*12)+1,
¡¡¡¡¡¡¡¡posA={},posB={},posC={},posD={},posE={},posF={},delay=800;
¡¡¡¡while ( A===B ){
¡¡¡¡¡¡B = parseInt(Math.random()*12)+1;
¡¡¡¡¡¡if (A!==B) break;
¡¡¡¡}
¡¡¡¡while ( C===A || C===B){
¡¡¡¡¡¡C = parseInt(Math.random()*12)+1;
¡¡¡¡¡¡if (C!==A &&C!==B) break;
¡¡¡¡}
¡¡¡¡while ( D===A || D==B || D===C){
¡¡¡¡¡¡D = parseInt(Math.random()*12)+1;
¡¡¡¡¡¡if (D!==A && D!==B && D!==C) break;
¡¡¡¡}
¡¡¡¡while ( E===A || E==B || E===C || E===D){
¡¡¡¡¡¡E = parseInt(Math.random()*12)+1;
¡¡¡¡¡¡if (E!==A && E!==B && E!==C && E!==D) break;
¡¡¡¡}
¡¡¡¡while ( F===A || F==B || F===C || F===D || F===E){
¡¡¡¡¡¡F = parseInt(Math.random()*12)+1;
¡¡¡¡¡¡if (F!==A && F!==B && F!==C && F!==D && F!==E) break;
¡¡¡¡}
¡¡¡¡var $boxA=$("#box"+A+"_724"), $boxB=$("#box"+B+"_724"),
¡¡¡¡¡¡¡¡$boxC=$("#box"+C+"_724"), $boxD=$("#box"+D+"_724"),
¡¡¡¡¡¡¡¡$boxE=$("#box"+E+"_724"), $boxF=$("#box"+F+"_724");
¡¡¡¡$boxA.animate({top:$boxB.css("top"),left:$boxB.css("left")},duration,"easeInOutBounce");
¡¡¡¡$boxB.animate({top:$boxA.css("top"),left:$boxA.css("left")},duration,"easeInOutElastic");
¡¡¡¡setTimeout(function(){
¡¡¡¡¡¡$boxC.animate({top:$boxD.css("top"),left:$boxD.css("left")},duration,"easeInOutExpo");
¡¡¡¡¡¡$boxD.animate({top:$boxC.css("top"),left:$boxC.css("left")},duration,"easeInOutQuart");
¡¡¡¡},delay);
¡¡¡¡setTimeout(function(){
¡¡¡¡¡¡$boxE.animate({top:$boxF.css("top"),left:$boxF.css("left")},duration,"easeInOutCirc");
¡¡¡¡¡¡$boxF.animate({top:$boxE.css("top"),left:$boxE.css("left")},duration,"easeInOutBack");
¡¡¡¡},delay*2);
¡¡});
¡¡// ¥Ü¥Ã¥¯¥¹¤òÀ°Î󤹤ë
¡¡$btn[18].click(function(){
¡¡¡¡for (var i=1; i<13; i++){
¡¡¡¡¡¡$box[i].css({top:110*parseInt((i-1)/3)+10 +"px",left:(i-1)%3*160+10 +"px"});
¡¡¡¡}
¡¡});
})();
¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç¤Ï²¼¤ÎÌϼ°¿Þ¤Ë¤ª¤±¤ë¿§¤Å¤±Éôʬ¡Ê e.custom ¢ª e.step ¢ª e.update ¡Ë¡¢¤¹¤Ê¤ï¤ÁÆó½Å½ä²ó½èÍýÆâ¤Ç¤Î¡Ö½é´üÃÍÀßÄê¡¢½ªÎ»ÃÍÀßÄê¡¢·Ð²á»þ¹ï¼èÆÀ¡¢¤½¤Î»þÅÀ¤ÎÍ×ÁÇɽ¼¨¡×¤È¤¤¤¦°ìÏ¢¤Îή¤ì¤òÀ×ÉÕ¤±¡¢Ìü¡¹ ¡Ö ư¤ ¡× ±é½Ð²áÄø¤Î³Ë¿´¤ËÇ÷¤ê¤Þ¤¹¡£
$().animate(prop,speed,easing,callback){
¡¡$().each(func(){ || $().queue(func(){ //¥¤¥Æ¥ì¡¼¥È¤½¤Î£±¡Ê ÂоÝÍ×ÁÇËè ¡Ë
¡¡¡¡$.each(prop,func(name,val){ //¥¤¥Æ¥ì¡¼¥È¤½¤Î£²¡Ê CSS¥¹¥¿¥¤¥ë¥×¥í¥Ñ¥Æ¥£Ëè ¡Ë
¢£¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç²òÆÉ¤¹¤ëÉôʬ
¡¡¡¡¢§ val ¤¬ toggle || show || hide
¡¡¡¡¡¡¡¡¡¡¢ª e.show || e.hide ¥á¥½¥Ã¥Éµ¯Æ°
¡¡¡¡¡¡¡¡¡¡¡¡¤³¤ì¤é¤Î¥á¥½¥Ã¥ÉÆâ¤ÇºÇ½ªÅª¤Ë e.custom ¥á¥½¥Ã¥É¤òµ¯Æ°
¡¡¡¡¢¥ val ¤¬¤½¤Î¾¤Ê¤é¤Ð
¡¡¡¡¡¡¡¡¡¡¢ª e.custom ¥á¥½¥Ã¥É¤òµ¯Æ°
¡¡¡¡¡ü e.custom ¡á½é´üÃͤò¼èÆÀ¤·¡¢¥¢¥Ë¥á³«»Ï»þ¹ï¤òµÏ¿¤¹¤ë¡£
¡¡¡¡¡¡ ¡¡¢
¡¡¡¡¡¡ ¡¡e.step ¡á³«»Ï»þ¹ï¤«¤é¤Î·Ð²á»þ¹ï¡¢¤½¤Î»þÅÀ¤Ë¤ª¤±¤ëCSSÃͤʤɤòÀßÄꤹ¤ë¡£
¡¡¡¡¡¡ ¡¡¡¡¢
¡¡¡¡¡¡ ¡¡¡¡e.update ¡á¤½¤Î»þÅÀ¤ÎCSSÃͤ˴ð¤Å¤¤¤ÆÍ×ÁǤòɽ¼¨¤¹¤ë¡£
¡¡¡¡}); // prop ½ä²ófunction
¡¡}); // jQuery¥¤¥ó¥¹¥¿¥ó¥¹¤ËÅÐÏ¿¤µ¤ì¤¿Í×ÁǤò½ä²ó¤¹¤ëfunction
};
°ú¿ô¡§½ç¤Ë¥¿¥°Í×ÁÇ¡¢¥ª¥Ö¥¸¥§¥¯¥È¡¢¥×¥í¥Ñ¥Æ¥£Ì¾¾Î
Ìò³ä¡§¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¶ñÂ⽤¹¤ë³Æ¼ï¥á¥½¥Ã¥É¤ä¥×¥í¥Ñ¥Æ¥£¤ò»ý¤Ä¥¤¥ó¥¹¥¿¥ó¥¹¤òÀ¸À®¤¹¤ë¡£
¤³¤Î¥³¥ó¥¹¥È¥é¥¯¥¿¤Ë new ±é»»»Ò¤òŬÍѤ·¤ÆÀ¸À®¤µ¤ì¤ë¥¤¥ó¥¹¥¿¥ó¥¹ e ¤Ï¡¢Åö½é¤Ï¥³¥ó¥¹¥È¥é¥¯¥¿¤ÎÄêµÁ¤«¤é¼¡¤Î 3 ¤Ä¤Î¥×¥í¥Ñ¥Æ¥£¤ò»ý¤Á¤Þ¤¹¡£
¡¡e ={
¡¡¡¡ elem : Âè 1 °ú¿ô, options : Âè 2 °ú¿ô, prop : Âè 3 °ú¿ô, options.orig : {}
¡¡}
¤½¤Î¸å¡¢³Æ¼ï¥á¥½¥Ã¥É¤Ë¤è¤ë e ¤Î¥×¥í¥Ñ¥Æ¥£¤Î³ÈÄ¥/Äɲä䡢Åö³º¥³¥ó¥¹¥È¥é¥¯¥¿¤Î prototype ¥ª¥Ö¥¸¥§¥¯¥È¤âÄêµÁ¤µ¤ì¤ë¤Î¤Ç¡¢e ¥ª¥Ö¥¸¥§¥¯¥È¤ÏºÇ½ªÅª¤Ë¼¡¤Î¤è¤¦¤Ë³ÈÄ¥¤µ¤ì¤Þ¤¹¡£¤³¤¦¤·¤Æ e ¥ª¥Ö¥¸¥§¥¯¥È¤Ï¸½ºß¿Ê¹ÔÃæ¤Î¥¢¥Ë¥á¤Ë·¸¤ë³Æ¼ï¾ðÊó¤òËþºÜ¤·¤¿¥ª¥Ö¥¸¥§¥¯¥È¤Ë¤Ê¤ê¤Þ¤¹¡£¤Þ¤¿¡¢#4151 ¡Á 4171 ¤Ë¤è¤Ã¤Æ¡¢jQuery.fx ¥¯¥é¥¹¤Ï 2 ¤Ä¤Î¥¯¥é¥¹¥×¥í¥Ñ¥Æ¥£¤òÍ¿¤¨¤é¤ì¤Þ¤¹¡£
¤³¤ì¤é¤Î¤³¤È¤òÌϼ°¿ÞŪ¤Ë¤Þ¤È¤á¤ë¤È°Ê²¼¤Î¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£
¢£ jQuery.fx ¥³¥ó¥¹¥È¥é¥¯¥¿¤Î e ¥¤¥ó¥¹¥¿¥ó¥¹
e = {
¡¡elem¡§elem,// Âè 1 °ú¿ô
¡¡prop:propName, // Âè 3 °ú¿ô
¡¡options: {
¡¡¡¡queue:false || true, step:function(){¡¦¡¦¡¦}, // ¤³¤ì¤é¤Ï¥æ¡¼¥¶¡¼¤¬»ØÄꤹ¤ë¡£
¡¡¡¡old,complete,easing,duration,display,overflow,// animate¥á¥½¥Ã¥É¤«¤é°ú¤·Ñ¤¬¤ì¤ë¡£
¡¡¡¡curAnim, //animate¥á¥½¥Ã¥É¤ÎÂè°ì°ú¿ô¤Ç¤¢¤ë prop ¥ª¥Ö¥¸¥§¥¯¥È¤¬³ÊǼ¤µ¤ì¤ë¡£
¡¡¡¡orig:{prop},
¡¡¡¡show:true || false || undefined, hide:true || false || undefined
¡¡},
¡¡startTime, start, end, unit, now, pos, state,
¡¡// ¥á¥½¥Ã¥É
¡¡cur(), custuom(), step(), update(), show(), hide()
}
¢£ jQuery.fx ¥³¥ó¥¹¥È¥é¥¯¥¿¤Î¥¯¥é¥¹¥×¥í¥Ñ¥Æ¥£
jQuery.fx.speeds = {"slow":600, "fast":200, _default:400}
jQuery.fx.step = {opacity:fn(e){¡¦¡¦}, _default:fn(e){¡¦¡¦}}
¤½¤ì¤Ç¤Ï¾å¤Î¡Ö ¢£¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç²òÆÉ¤¹¤ëÉôʬ ¡× ¤ÎÌϼ°¿Þ¤Ë½¾¤Ã¤Æ¡¢e ¥¤¥ó¥¹¥¿¥ó¥¹¤Î³Æ¼ï¥á¥½¥Ã¥É¤òÀ×ÉÕ¤±¤ë¤³¤È¤Ë¤·¤Þ¤¹¡£ºÇ½é¤ËÅо줹¤ë¤Î¤Ï e.show() ¥á¥½¥Ã¥É¤Ç¤¹¡£
¤³¤ì¤«¤é²òÆÉ¤¹¤ë e.show() ¥á¥½¥Ã¥É¤È e.hide() ¥á¥½¥Ã¥É¤Ï¡¢jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤«¤éµ¯Æ°¤µ¤ì¤ë show() ¥á¥½¥Ã¥É¡¢hide() ¥á¥½¥Ã¥É¤Èɽ¸½¤¬¹ó»÷¤·¤Æ¤¤¤Þ¤¹¡£ºÇ½é¤Ï;¤ê¤Ë»÷¤Æ¤¤¤ë¤³¤Îɽ¸½¤Ë¸ÍÏǤ¤¤Þ¤·¤¿¡£
jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Î show / hide ¥á¥½¥Ã¥É¤ò°ú¿ô¤Ê¤·¤Çµ¯Æ°¤·¤¿¾ì¹ç¤Ë¤Ï¡¢display¥×¥í¥Ñ¥Æ¥£¤¬ none °Ê³°¡Ê show ¤Î¾ì¹ç ¡Ë¡¢¤¢¤ë¤¤¤Ï none¡Ê hide ¤Î¾ì¹ç ¡Ë¤ËÀßÄꤵ¤ì¤Æ¡¢Âоݥ¿¥°Í×ÁǤ¬½Ö»þ¤Ëɽ¼¨ / ±£Ê䵤ì¤Þ¤¹¡£
¤³¤ì¤ËÂФ·¤Æ¡¢jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Î show / hide ¥á¥½¥Ã¥É¤ò¥¢¥Ë¥á½êÍ×»þ´Ö¤Ê¤É¤Î°ú¿ôÉÕ¤¤Çµ¯Æ°¤·¤¿¾ì¹ç¤Ë¤Ï¡¢animate ¥á¥½¥Ã¥É¤¬¸Æ¤Ó½Ð¤µ¤ì¤Æ¡¢¤½¤³¤«¤é¹¹¤Ë e.show / e.hide ¥á¥½¥Ã¥É¤¬¸Æ¤Ó½Ð¤µ¤ì¤Þ¤¹¡£¤³¤Î»þ e.show / e.hide ¥á¥½¥Ã¥É¤Ï·è¤·¤Æ display Ãͤò none ¤È¤¹¤ë¤³¤È¤Ï¤Ê¤¯¡¢¾ï¤Ëɽ¼¨¥â¡¼¥É¤Î¥Þ¥ÞÊݤ¿¤ì¤Þ¤¹¡£
½Ö»þ¥¢¥Ë¥á¤È»þ´Ö¤ò³Ý¤±¤Æ¹Ô¤¦¥¢¥Ë¥áưºî¤Ç¤Ï¡¢»þ´ÖÍ×ÁǤÎÍ̵¤È¤¤¤¦º¬ËÜŪ¤Êº¹°Û¤¬¤¢¤ë¤¿¤á¡¢¥¹¥¯¥ê¥×¥Èưºî¤âËܼÁŪ¤ËÊѤï¤ê¤Þ¤¹¡£
jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Î show / hide ¥á¥½¥Ã¥É¤Ï¡¢style.display ¥×¥í¥Ñ¥Æ¥£¤Î none ¤È block¡¢inline ¤Ê¤É¤ÎÃͤò»ÈÍѤ·¤ÆÉ½¼¨¤È±£ÊäòÁàºî¤·¡¢¤³¤ì¤ËÂФ·¤Æ e.show / e.hide ¥á¥½¥Ã¥É¤Ï¡¢»þ´Ö¤ò³Ý¤±¤ÆÅö³º¥¿¥°Í×ÁǤÎÂ礤µÅù¤Ë·¸¤ë³Æ¼ï CSS ¥×¥í¥Ñ¥Æ¥£Ã͡ʥޡ¼¥¸¥ó¡¢¥Ñ¥Ç¥£¥ó¥°¡¢ÆâÍÆµÚ¤ÓÉÔÆ©ÌÀÅ٤ξ¡¢¥Ü¡¼¥À¡¼¥µ¥¤¥º¡¢¥Õ¥©¥ó¥È¥µ¥¤¥ºÅù¡¹¤âÂоݤȤʤë¡Ë¤òÁàºî¤·¤Æ¡¢Í×ÁǤÎɽ¼¨¾õÂÖ¤òÊѲ½¤µ¤»¤Þ¤¹¡£¤³¤³¤Ç¤Ïɽ¼¨¾õÂÖ¤òÁàºî¤¹¤ë¤Î¤Ç¤¢¤Ã¤Æ¡¢·è¤·¤ÆÍ×ÁǤò±£Ê乤뤳¤È¤Ï¤¢¤ê¤Þ¤»¤ó¡£
°ú¿ô¡§¤Ê¤·
ÊÖÃÍ¡§¤Ê¤·
µ¡Ç½¡§ÂоÝÍ×ÁǤÎÂÐ¾Ý CSS ¥×¥í¥Ñ¥Æ¥£ÃͤΡ¢½é´üÃÍ¡Ê 0 Ëô¤Ï 1 ¡Ë¤È½ªÎ»ÃͤòÀßÄꤷ¡¢¤³¤ì¤é¤ò custom ¥á¥½¥Ã¥É¤ËÅϤ·¤Þ¤¹¡£¤³¤¦¤·¤ÆºÇ¾®°¿¤¤¤ÏÆ©ÌÀ¤Êɽ¼¨¾õÂÖ ¡á¡Ö ¼Â¼ÁŪ¤ÊÈóɽ¼¨¾õÂÖ ¡×¤«¤é¡¢É½¼¨¾õÂ֤ؤȰܹԤ¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬¼Â¸½¤µ¤ì¤Þ¤¹¡£
¤³¤Î¥á¥½¥Ã¥É¤ÏÂоÝÍ×ÁǤËÂФ·¤Æ¡¢¡Ö¼Â¼ÁŪ¤Ê¡×Èóɽ¼¨¾õÂÖ¤«¤é¥¢¥Ë¥áÁ°¤Ë¥Ö¥é¥¦¥¶¤¬ÉÁ²è¤·¤Æ¤¤¤¿ÃͤޤǤΥ¢¥Ë¥á¡¼¥·¥ç¥ó¤ò°ú¤µ¯¤³¤·¤Þ¤¹¡£¤½¤Î¿Ê¹Ô¤Ï¼¡¤Î 3 ²áÄø¤Ëʬ¤±¤é¤ì¤Þ¤¹Ž¡
Âè 1 ²áÄø¡Ê #4070¡Á4072 ¡Ë¤Ï¥¢¥Ë¥á³«»ÏÁ°¤Î style.properties Ãͤε²±¤Ç¤¹¡£¥¢¥Ë¥á¡¼¥·¥ç¥ó³«»ÏÁ°¤Ë¡¢¥¢¥Ë¥áÂоݥ¿¥°Í×ÁÇ elem ¤Î elem.style.properties ¤ò¡¢e.options.orig ¥×¥í¥Ñ¥Æ¥£¤ËÂÔÈò¡¿µ²±¤µ¤»¤Þ¤¹¡£¤³¤Î¥á¥½¥Ã¥É¤«¤éºÇ½ªÅª¤Ëµ¯Æ°¤µ¤ì¤ë update ¥á¥½¥Ã¥É¤¬¡¢elem.style.properties ¤ò½ñ¤´¹¤¨¤Æ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¼Â¸½¤¹¤ë¤Î¤Ç¡¢¤³¤Î²áÄø¤¬É¬ÍפȤʤê¤Þ¤¹¡£
¤Þ¤¿¡¢CSS ¥×¥í¥Ñ¥Æ¥£Ãͤòµ²±¤µ¤»¤¿¸å¤Ë e.options.show Ãͤò true ¤ËÀßÄꤷ¡¢e.show() ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤¿¤³¤È¤âµ²±¤µ¤»¤Þ¤¹¡£
Âè 2 ²áÄø¡Ê #4077 ¡Ë¤Ç¤Ï¡¢ÂÐ¾Ý CSS ¥×¥í¥Ñ¥Æ¥£¤Î½é´üÃͤȽªÎ»Ãͤò custom ¥á¥½¥Ã¥É¤ËÅϤ·¤Þ¤¹¡£½é´üÃͤϥץí¥Ñ¥Æ¥£¤¬ width ¤Þ¤¿¤Ï height ¤Î¾ì¹ç¤Ë¤Ï 1 ¡¢¤½¤Î¾¤Î¾ì¹ç¤Ë¤Ï 0 ¤È¤·¡¢½ªÎ»ÃÍ¤Ï e.cur ¥á¥½¥Ã¥É¤òµ¯Æ°¤·¤Æ¼èÆÀ¤·¤Þ¤¹¡£¤³¤¦¤·¤ÆÆÀ¤é¤ì¤¿½é´üÃͤȽªÎ»Ãͤò°ú¿ô¤Ë¤·¤Æ custom ¤¬µ¯Æ°¤µ¤ì¤Þ¤¹¡£
¤³¤³¤ËÂÐ¾Ý CSS ¥×¥í¥Ñ¥Æ¥£¤Î½é´üÃͤò 1 Ëô¤Ï 0 ¤È¤¹¤ë¤Î¤Ï¡¢¸À¤¦¤Þ¤Ç¤â¤Ê¤¯Åö³ºÍ×ÁǤΥ¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¡Ö¼Â¼ÁŪ¤ÊÈóɽ¼¨¾õÂ֡פ«¤é³«»Ï¤¹¤ë¤¿¤á¤Ç¤¹¡£
Âè 3 ²áÄø¤Ï $(this).show()¥á¥½¥Ã¥É¤Îµ¯Æ°¤Ç¤¹¡£¤³¤ì¤Ë¤è¤ê custom ¥á¥½¥Ã¥É¤¬½ªÎ»¤·¡¢´û¤ËÅö³ºÍ×ÁǤ¬É½¼¨¾õÂ֤ˤʤäƤ¤¤ë¤³¤È¤ò "olddisplay" ¤È¤¤¤¦Ì¾¾Î¤ÇÅö³ºÍ×ÁǤ˴ØÏ¢¤Å¤±¤Þ¤¹¡£
4068:¡¡// Simple 'show' function
4069:¡¡show: function(){
4070:¡¡¡¡// Remember where we started, so that we can go back to it later
¡¡¡¡¡¡¡¡ // 4077 ¹Ô¤Ç¥¹¥¿¥¤¥ë°ÀÃͤò 1 Ëô¤Ï 0 ¥¼¥í¤Ë¤¹¤ë¤Î¤Ç¡¢¸½ºßÃͤòµ²±¤µ¤»¤Æ¤ª¤¯¡£
¡¡¡¡¡¡¡¡ // options.orig ¥ª¥Ö¥¸¥§¥¯¥È¤Î prop ¥×¥í¥Ñ¥Æ¥£¤Ë
¡¡¡¡¡¡¡¡ // Åö³ºÍ×ÁǤΥ¹¥¿¥¤¥ë°À¥ª¥Ö¥¸¥§¥¯¥È¤Î prop ¥×¥í¥Ñ¥Æ¥£¤ÎÃͤòÂåÆþ¤¹¤ë¡£
4071:¡¡¡¡this.options.orig[this.prop] = jQuery.attr( this.elem.style, this.prop );
4072:¡¡¡¡this.options.show = true; // e.show ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤¿¤³¤È¤òµÏ¿¤¹¤ë¡£
4073:
4074:¡¡¡¡// Begin the animation
4075:¡¡¡¡// Make sure that we start at a small width/height to avoid any
4076:¡¡¡¡// flash of content
¡¡¡¡¡¡¡¡ // ¤Á¤é¤Ä¤¤òÈò¤±¤ë¤¿¤á¤ËÉý¤È¹â¤µ¤ÎºÇ¾®Ãͤϥ¼¥í¤È¤»¤º¡¢¤½¤Î¾¤Î¥¹¥¿¥¤¥ë
¡¡¡¡¡¡¡¡ // °ÀÃÍ¤Ï CSS Ãͤϥ¼¥í¤È¤·¤Æ start CSS ÃͤòÀßÄꤷ¡¢end CSS Ãͤò¥«¥ì¥ó¥È
¡¡¡¡¡¡¡¡ // ¥¹¥¿¥¤¥ëÃͤȤ·¤Æ¡¢custom ¥á¥½¥Ã¥É¤òµ¯Æ°¤¹¤ë¡£
4077:¡¡¡¡this.custom(this.prop == "width" || this.prop == "height" ? 1 : 0, this.cur());
4078:
4079:¡¡¡¡// Start by showing the element
4080:¡¡¡¡jQuery(this.elem).show(); // jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¥á¥½¥Ã¥É show()¤Îµ¯Æ°¤Ë¤è¤ê¡¢
4081:¡¡},// Åö³ºÍ×ÁǤ¬É½¼¨¾õÂ֤ˤ¢¤ëÅù¤Î¾ðÊó¤òµÏ¿¤µ¤»¤ë¡£
°ú¿ô¡§¤Ê¤·
ÊÖÃÍ¡§¤Ê¤·
µ¡Ç½¡§ e.show() ¥á¥½¥Ã¥É¤ÎµÕ¤Î¤³¤È¤ò¹Ô¤¤¤Þ¤¹¡£É½¼¨¾õÂÖ¤«¤é¡Ö ¼Â¼ÁŪ¤Ê ¡×Èóɽ¼¨¾õÂ֤ؤȰܹԤ¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò°ú¤µ¯¤³¤·¤Þ¤¹¡£
¤³¤Î¥á¥½¥Ã¥É¤Î¿Ê¹Ô²áÄø¤Ïñ½ã¤Ç¤¹¡£ºÇ½é¤Ë¹Ô¤¦¤³¤È¤Ï¡¢e.show() ¥á¥½¥Ã¥É¤ÈÁ´¤¯Æ±°ì¤Ç¤¹¡£Åö½éÉÁ²è»þ¤Î CSS ¥×¥í¥Ñ¥Æ¥£Ãͤò e.options.orig ¥×¥í¥Ñ¥Æ¥£¤ËÂÔÈò/µ²±¤µ¤»¡¢¤«¤Ä¡¢e.options.hide Ãͤò true ¤ËÀßÄꤷ¡¢e.hide() ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤¿¤³¤È¤âµ²±¤µ¤»¤Þ¤¹¡£¡Ê#4085¡Á4087¡Ë
¼¡¤Ë¡¢ custom ¥á¥½¥Ã¥É¤ËÂÐ¾Ý CSS ¥×¥í¥Ñ¥Æ¥£¤Î½é´üÃͤȽªÎ»ÃͤòÅϤ·¤Æ¡¢É½¼¨¾õÂÖ¤«¤é±£ÊþõÂ֤ذܹԤ¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òÎ嵯¤·¤Þ¤¹¡£¤³¤Î½é´üÃÍ¤Ï e.cur() ¥á¥½¥Ã¥É¤òµ¯Æ°¤µ¤»¤Æ¸½ºßɽ¼¨Ãͤò¼èÆÀ¤·¡¢½ªÎ»ÃÍ¤Ï 0 ¤Ç¤¹¡£¡Ê#4089¡Á4090¡Ë
¤³¤³¤Ë¡¢e.show ¥á¥½¥Ã¥É¤Î¾ì¹ç¤È°Û¤Ê¤ê¡¢Èóɽ¼¨¾õÂ֤ΠCSS ÃͤòÁ´¤Æ¥¼¥í¤È¤·¤Æ¤¤¤ë¤³¤È¤Ëα°Õ¤¹¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£
show¥á¥½¥Ã¥É¤Î¾ì¹ç¤Ë¤Ï¡¢Èóɽ¼¨¾õÂÖ¤«¤éɽ¼¨¾õÂÖ¤ØÁ«°Ü¤¹¤ëºÝ¤Î "¤Á¤é¤Ä¤" ¤òËɻߤ¹¤ë¤¿¤á¡¢¥×¥í¥Ñ¥Æ¥£Ì¾¤¬ width ¤È height ¤Î»þ¤Ë¤Ï¥×¥í¥Ñ¥Æ¥£½é´üÃͤò 1 ¤È¤·¤Æ¤¤¤Þ¤·¤¿¤¬¡¢e.hide ¥á¥½¥Ã¥É¤ÎÈóɽ¼¨¾õÂÖÃ͡ʡᥢ¥Ë¥á½ªÎ»Ã͡ˤϡ¢¥×¥í¥Ñ¥Æ¥£¤Ë´Ø¤ï¤é¤ºÁ´¤Æ¥¼¥í¤È¤·¤Æ¤¤¤Þ¤¹¡£±£Ê乤ë¾ì¹ç¤Ë¤Ï¤Á¤é¤Ä¤ÌäÂ꤬ȯÀ¸¤·¤Ê¤¤¤«¤é¡¢Á´¤Æ¤Î¥×¥í¥Ñ¥Æ¥£Ãͤò¥¼¥í¤Ë¤·¤Æ¤â»Ù¾ã¤¬¤Ê¤¤¤Î¤Ç¤¹¡£
¤½¤ì¤Ç¤â·è¤·¤Æ display ÃÍ¤Ï none ¤Ë¤·¤Æ¤¤¤Ê¤¤¤³¤È¤âƱ»þ¤Ë³Îǧ¤·¤Æ¤ª¤¯É¬Íפ¬¤¢¤ê¤Þ¤¹¡£e.hide ¥á¥½¥Ã¥É¤ÏÍ×ÁǤò CSS Ū¤Ë¤Ï±£Ê令º¡¢¼Â¼ÁŪ¤ÊÈóɽ¼¨¾õÂÖ¤Çɽ¼¨¤·Â³¤±¤ë¡¢¤È¸À¤¨¤Ð¤è¤¤¤Ç¤·¤ç¤¦¤«¡£
4083:¡¡// Simple 'hide' function
4084:¡¡hide: function(){
4085:¡¡¡¡// Remember where we started, so that we can go back to it later
4086:¡¡¡¡this.options.orig[this.prop] = jQuery.attr( this.elem.style, this.prop );
4087:¡¡¡¡this.options.hide = true; // this.options.hide ¥×¥í¥Ñ¥Æ¥£¤ò true ¤È¤¹¤ë¡£
4088:
4089:¡¡¡¡// Begin the animation
¡¡¡¡¡¡¡¡ // CSS ¸½ºßÃͤò start ¤Ë¡¢end Ãͤò¥¼¥í¤È¤·¤Æ custom ¥á¥½¥Ã¥É¤òµ¯Æ°¤¹¤ë¡£
4090:¡¡¡¡this.custom(this.cur(), 0);
4091:¡¡},
°ú¿ô¡§½ç¤Ë¡¢½é´üÃÍ¡¢½ªÎ»ÃÍ¡¢Ã±°Ì
ÊÖÃÍ¡§¤Ê¤·
µ¡Ç½¡§½é´üÃÍ¡¢¥¢¥Ë¥á³«»Ï»þ¹ï¡¢e ¥¤¥ó¥¹¥¿¥ó¥¹¤Î¥¢¥Ë¥áÍѤγƼï¥×¥í¥Ñ¥Æ¥£¡Ê start¡¢end¡¢unit¡¢now¡¢pos µÚ¤Ó state ¡Ë¤È 1 ¤Ä¤Î´Ø¿ô¡Ê t ´Ø¿ô ¡Ë¤ò¼¡¡¹¤ËÀßÄꤷ¡¢¤½¤Î¸å e.step() ¥á¥½¥Ã¥É¤òµ¯Æ°¤·¤Æ¡¢¥¤¥ó¥¿¡¼¥Ð¥ë´Ø¿ô¤Ë¤è¤Ã¤Æ 13 ¥ß¥êÉÃËè¡¢Åö³ºÍ×ÁǤγƥץí¥Ñ¥Æ¥£Ëè¤Ë¥×¥í¥Ñ¥Æ¥£ÃͤòÊѲ½¤µ¤»¡¢¤â¤Ã¤Æ¤½¤ì¤òɽ¼¨¤µ¤»¤Æ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¼Â¸½¤·¡¢¹¹¤Ë½ªÎ»½èÍý¤ò¹Ô¤¤¤Þ¤¹¡£
¤³¤Î¥á¥½¥Ã¥É¤Ï¤½¤Î̾¤ÎÄ̤ꡢ¥«¥¹¥¿¥à ¡Ê slideUp ¤ä fadeOut ¤Ê¤É¤Î´ûÀ®¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ç¤Ï¤Ê¤¤¡¢¥æ¡¼¥¶¡¼»ØÄê¤Î ¡Ë ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎÃæ³Ë¤ò°Ù¤·¤Þ¤¹¡£¤½¤ÎÌò³ä¤Ë¤è¤ê 2 ¤Ä¤Î¥Ö¥í¥Ã¥¯¤Ëʬ¤±¤Æ¹Í»¡¤·¤Þ¤¹¡£
#4050 ¡Á 4065 ¤Ï¡¢Á°È¾¤È¤ÏÂоÈŪ¤ËÂçÊÑÊ£»¨¤Ç¤¹¡£
²þ¤á¤Æ¥¢¥Ë¥á¥³¡¼¥É¤ÎÁ´ÂΤò»×¤¤µ¯¤³¤¹¤È¡¢º£ÂоݤȤ·¤Æ¤¤¤ëưºî¤Ï animate ¥á¥½¥Ã¥É¤Î jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Î³ÆÍ×ÁÇËè¤Î½ä²ó½èÍý¤Î¡¢¤½¤ÎÃæ¤Ç¤Î³Æ CSS ¥×¥í¥Ñ¥Æ¥£Ëè¤Î½ä²ó½èÍý²áÄø¤Ç°ú¤µ¯¤³¤µ¤ì¤Æ¤¤¤ë»ö¾Ý¤Ç¤¹¡£¤³¤ÎÊ£»¨¤µ¸Î¤Ë¥³¡¼¥É¿Ê¹Ô²áÄø¤¬Ê¬¤«¤ê¤Ë¤¯¤¤¤Î¤Ç¡¢ÁàºîÂоݤò°Ê²¼¤Î¤è¤¦¤Ë²Ä»ë²½¤·¤Æ¤ß¤Þ¤¹¡£
ÂоݤȤ·¤Æ¤¤¤ë jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë¥¿¥°Í×ÁÇ¿ô¤ò m ¡¢¥¢¥Ë¥áÍѤΠCSS ¥ª¥Ö¥¸¥§¥¯¥È¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë¥×¥í¥Ñ¥Æ¥£¿ô¤ò n ¤È¤·¤Æ¡¢°¿¤ë t ´Ø¿ô¤¬¤É¤ÎÍ×ÁǤΤɤΥץí¥Ñ¥Æ¥£¤Î¤¿¤á¤Î¤â¤Î¤Ê¤Î¤«Ê¬¤«¤ë¤è¤¦¤Ë¡¢°Ê²¼¤Î¤è¤¦¤Ëɽ¼¨¤·¤Þ¤¹¡£Ã¢¤·¡¢¤³¤Î¿ôÎó¤Ë¹ó»÷¤·¤¿É½¼¨¤Ï¤¢¤¯¤Þ¤Ç¤âÀâÌÀÍѤǤ¹¡£
¾å¤Î¤è¤¦¤Ë³Æ¡¹¤¬¼±Ê̤Ǥ¤ë¡Ê m ¡ß n ¡Ë¸Ä¤Î t ´Ø¿ô¤ò̾ÉÕ¤±¤¿¾å¤Ç¡¢#4052-4064 ¤ò²òÆÉ¤·¤Þ¤¹¡£
4036:¡¡// Start an animation from one number to another
4037:¡¡custom: function(from, to, unit){
4038:¡¡¡¡this.startTime = now(); // ¸½ºß»þ¹ï¤òÅÐÏ¿¤¹¤ë¡£
4039:¡¡¡¡this.start = from; // ¥¢¥Ë¥á³«»ÏÃÍ
4040:¡¡¡¡this.end = to; // ¥¢¥Ë¥á½ªÎ»ÃÍ
4041:¡¡¡¡this.unit = unit || this.unit || "px";
4042:¡¡¡¡this.now = this.start; // = from ¤È¤Ê¤ë¡£
4043:¡¡¡¡this.pos = this.state = 0;
4044:
4045:¡¡¡¡var self = this; // this ¤Ï jQuery.fx ¥¯¥é¥¹¤Î¥¤¥ó¥¹¥¿¥ó¥¹
4046:¡¡¡¡function t(gotoEnd){ // t ´Ø¿ô¤òÄêµÁ¤¹¤ë
4047:¡¡¡¡¡¡return self.step(gotoEnd); // step ¥á¥½¥Ã¥É¤Î¼Â¹Ô·ë²Ì¤òÊÖ¤¹¡£
4048:¡¡¡¡}
4049:
4050:¡¡¡¡t.elem = this.elem; // t ¤Î elem ¥×¥í¥Ñ¥Æ¥£Ãͤˡ¢this.elem ¤òÂåÆþ¤¹¤ë¡£
4051:¡¡¡¡// t ´Ø¿ô¤Î¼Â¹Ô·ë²Ì¤¬ true ¤Ç¡¢t ´Ø¿ô¤òÄɲä·¤¿ timers ÇÛÎó¤¬Â¸ºß¤·¡¢
¡¡¡¡¡¡¡¡ // ¤«¤Ä timerId ¤¬Â¸ºß¤·¤Ê¤±¤ì¤Ð
4052:¡¡¡¡if ( t() && jQuery.timers.push(t) && !timerId ) {
4053:¡¡¡¡¡¡timerId = setInterval(function(){
4054:¡¡¡¡¡¡¡¡var timers = jQuery.timers;
4055:
4056:¡¡¡¡¡¡¡¡for ( var i = 0; i < timers.length; i++ )
4057:¡¡¡¡¡¡¡¡¡¡if ( !timers[i]() ) // timers[i] ¤Î¼Â¹Ô·ë²Ì¤¬ false ¤Ê¤é¤Ð
4058:¡¡¡¡¡¡¡¡¡¡¡¡timers.splice(i--, 1); // i ÈÖÌܤÎÍ×ÁǤòºï½ü¤·¤Æ¤«¤é i ¤ò 1 ¸º¤¸¤ë¡£
4059:
4060:¡¡¡¡¡¡¡¡if ( !timers.length ) { // timers ÇÛÎó¤ÎÍ×ÁǤ¬¤Ê¤¯¤Ê¤ì¤Ð
4061:¡¡¡¡¡¡¡¡¡¡clearInterval( timerId ); // timerId ¤òÄä»ß¤·¡¢
4062:¡¡¡¡¡¡¡¡¡¡timerId = undefined; // timerId ¤ò̤ÄêµÁ¤È¤¹¤ë¡£
4063:¡¡¡¡¡¡¡¡}
4064:¡¡¡¡¡¡}, 13);
4065:¡¡¡¡}
4066:¡¡},
°ú¿ô¡§¶¯À©Åª¤Ë»»½Ð¥¹¥¿¥¤¥ëÃͤμèÆÀ¤ò¹Ô¤¦¾ì¹ç true ¤È¤¹¤ë¡£
ÊÖÃÍ¡§¥¹¥¿¥¤¥ëÃ͡ʥ¿¥°Â°À¤Ëµ½Ò¤µ¤ì¤¿¥¹¥¿¥¤¥ëÃÍ¡¢Ëô¤Ï¥¹¥¿¥¤¥ë¥ª¥Ö¥¸¥§¥¯¥È¤ÇÀßÄꤵ¤ì¤Æ¤¤¤ë¥¹¥¿¥¤¥ëÃÍ¡¢Ëô¤Ï»»½Ð¥¹¥¿¥¤¥ëÃÍ¡Ë
µ¡Ç½¡§ÊÖÃͤÎÀâÌÀ¤ÎÄ̤ꡣ
e.cur ¥á¥½¥Ã¥É¤Ï¡¢animate¡¢e.show¡¢e.hide ¤Ê¤É¤Î³Æ¼ï¥á¥½¥Ã¥É¤«¤é¸Æ¤Ó½Ð¤µ¤ì¤Æ¡¢¥¿¥°Â°À¤ä style ¥ª¥Ö¥¸¥§¥¯¥È¤ËÀßÄꤵ¤ì¤Æ¤¤¤ë¥¹¥¿¥¤¥ëÃͤò¼èÆÀ¤·¡¢¤¢¤ë¤¤¤Ï»ØÄ꤬¤¢¤ì¤Ð»»½Ð¥¹¥¿¥¤¥ëÃͤò¼èÆÀ¤·¤Þ¤¹¡£
¤Þ¤º¡¢animate ¥á¥½¥Ã¥É¤«¤é¤Ï°ú¿ô true ÉÕ¤¤Ç¸Æ¤Ó½Ð¤µ¤ì¤Þ¤¹¡£¡Ê#3899¡Ëtrue ÉÕ¤¤Ê¤Î¤ÇÂоÝÍ×ÁǤΥ¢¥Ë¥á³«»ÏÁ°¤Î»»½Ð¥¹¥¿¥¤¥ëÃͤ¬¶¯À©Åª¤Ë¼èÆÀ¤µ¤ì¡¢¤½¤ÎÃͤ¬¥¢¥Ë¥á³«»ÏÃͤȤµ¤ì¤Þ¤¹¡£
¾Êý¡¢e.show ¥á¥½¥Ã¥ÉµÚ¤Ó e.hide ¥á¥½¥Ã¥É¤«¤é¤Ï°ú¿ô¤Ê¤·¤Ç¸Æ¤Ó½Ð¤µ¤ì¤ë¤Î¤Ç¡Ê#4077¡Ë¡¢¥¢¥Ë¥á³«»ÏÁ°¤ÎÂоÝÍ×ÁǤΥ¿¥°Â°ÀÃÍËô¤Ï style ¥ª¥Ö¥¸¥§¥¯¥ÈÃͤ¬¼èÆÀ¤µ¤ì¤Æ¡¢¥¢¥Ë¥á½ªÎ»ÃͤȤʤê¤Þ¤¹¡£
4027:¡¡// Get the current size
4028:¡¡cur: function(force){
¡¡¡¡¡¡¡¡ // Í×ÁǰÀ¤ËÅö³º¥×¥í¥Ñ¥Æ¥£Ãͤ¬Â¸ºß¤·¡¢¤«¤Ä¥¹¥¿¥¤¥ë°À¤¬¤Ê¤¤¤«¡¢
¡¡¡¡¡¡¡¡ // ¤¢¤Ã¤Æ¤âÅö³º¥×¥í¥Ñ¥Æ¥£Ãͤ¬¤Ê¤¤¾ì¹ç¤Ë¤Ï
4029:¡¡¡¡if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) )
4030:¡¡¡¡¡¡return this.elem[ this.prop ]; // Í×ÁǰÀÃͤòÊÖ¤¹¡£
4031:¡¡¡¡// Åö³ºÍ×ÁǤÎÅö³º¥×¥í¥Ñ¥Æ¥£Ãͤòñ°Ì̾¤Ê¤·¤Ç¼èÆÀ¤¹¤ë¡£
4032:¡¡¡¡var r = parseFloat(jQuery.css(this.elem, this.prop, force));
¡¡¡¡¡¡¡¡ // r ¤¬¥¼¥í°Ê³°¤Ç -1 Ëü¤è¤ê¤âÂ礤±¤ì¤Ð r ¤òÊÖ¤¹¡£
¡¡¡¡¡¡¡¡ // ¤µ¤â¤Ê¤±¤ì¤Ð force °ú¿ô¤Ê¤·¤ÇÅö³ºÍ×ÁǤÎÅö³º¥×¥í¥Ñ¥Æ¥£¤Î CSS Ãͤò¼èÆÀ¤¹¤ë¡£
¡¡¡¡¡¡¡¡ // ¼èÆÀ¤Ç¤¤Ê¤±¤ì¤Ð 0 ¤òÊÖ¤¹¡£
4033:¡¡¡¡return r && r > -10000 ? r : parseFloat(jQuery.curCSS(this.elem, this.prop)) || 0;
4034:¡¡},
°ú¿ô¡§gotoEnd ¤ò true ¤ËÀßÄꤹ¤ë¤ÈÂоÝÍ×ÁǤΥ¢¥Ë¥á¡¼¥·¥ç¥ó¤òÄä»ß¤µ¤»¤Þ¤¹
ÊÖÃÍ¡§false¡Ê¥¢¥Ë¥á¤¬½ªÎ»¤·¤¿»þ¡Ë Ëô¤Ï true¡Ê¥¢¥Ë¥á¼Â¹ÔÃæ¤Î»þ¡Ë
µ¡Ç½¡§2¤Ä¤ÎÌò³ä¤¬¤¢¤ê¡¢Âè 1 ¤Ï¥¢¥Ë¥á³«»Ï¤È¥¢¥Ë¥á½ªÎ»¤Î»ÏÅÀ/½ªÅÀ´Ö¤Î¥×¥í¥Ñ¥Æ¥£Ãͤò·Ð²á»þ´Ö¤Ë´ð¤Å¤¤¤Æ¹ï¤à¤³¤È¤Ç¤¹¡£¤³¤Î¾ì¹ç¡¢ÊÖÃÍ true ¤ò e.custom ¥á¥½¥Ã¥É¤ËÊÖ¤·¤Þ¤¹¡£Âè 2 ¤Ï¡¢¥¢¥Ë¥á½ªÎ»¸å¤Î½èÍý¤ò¹Ô¤¦¤³¤È¤Ç¤¹¡£¤³¤Î¾ì¹çÊÖÃÍ false ¤ò e.custom ¥á¥½¥Ã¥É¤ËÊÖ¤·¤Þ¤¹¡£
¤³¤Î¥á¥½¥Ã¥É¤òÍý²ò¤¹¤ëÁ°Äó¤È¤·¤Æ¡¢¸Æ¤Ó½Ð¤·¸µ¤Î e.custom ¥á¥½¥Ã¥ÉµÚ¤Ó¤½¤Î¸Æ¤Ó½Ð¤·¸µ¤Î animate ¥á¥½¥Ã¥É¤Ë¤è¤Ã¤Æ¡¢e.options ¥ª¥Ö¥¸¥§¥¯¥È¤Î³Æ¼ï¥×¥í¥Ñ¥Æ¥£¤¬´û¤Ë³ÈÄ¥¤µ¤ì¤Æ¤¤¤ë¤³¤È¡¢¤½¤·¤Æ¤½¤ì¤é¤¬ e.step ¥á¥½¥Ã¥É¤Ç½Ä²£¤ËÍøÍѤµ¤ì¤ë¤³¤È¤òƧ¤Þ¤¨¤Æ¤ª¤¯É¬Íפ¬¤¢¤ê¤Þ¤¹¡£
step ¥á¥½¥Ã¥É¤Ï¤Þ¤ººÇ½é¤Ë¡¢¤³¤Î¥á¥½¥Ã¥É¤¬¸Æ¤Ó½Ð¤µ¤ì¤¿»þ¹ï¤òÊÑ¿ô t ¤ËµÏ¿¤·¤Þ¤¹¡£ºÇ½é¤Ë¹Ô¤¦¤³¤Îºî¶È¤Ï¡¢»þ´Ö¤È¤¤¤¦ ¡Ö ÊÑ¿ô ¡× ¤ò´ÉÍý¤·¡¢Í×ÁǤÎÉÁ²è¤ò¼«ºß¤ËÁàºî¤¹¤ë¾å¤ÇÉԲķç¤Ç¤¹¡£
ÊÑ¿ô t ¤ÎÃÍ ¡Ê step ¥á¥½¥Ã¥É¤Îµ¯Æ°»þ¹ï ¡Ë ¤¬¡¢e.custom ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤¿»þ¹ï ¡Ê startTime ¡Ë ¤È e,options.duration ¤Î¹ç»»Ãͤè¤ê¤â¾®¤µ¤±¤ì¤Ð¡¢¤¹¤Ê¤ï¤Á¡¢¥¢¥Ë¥á¤¬µ¯Æ°¤·¤Æ¤«¤é¤Þ¤À duration ¤Ç»ØÄꤵ¤ì¤Æ¤¤¤ë»þ´Ö¤¬·Ð²á¤·¤¤é¤Ê¤¤Æâ¤Ë step ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤¿¾ì¹ç¤Ë¤Ï¡¢e.step ¥á¥½¥Ã¥É¤Ï¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¹ï¤à¤¿¤á¤Î¥×¥í¥Ñ¥Æ¥£ÃͤÎÀßÄê¤ò°Ê²¼¤Î¤è¤¦¤Ë¹Ô¤¤¤Þ¤¹¡£¡Ê #4134 ¡Á 4144 ¡Ë
(1) e.step ¤Î°ú¿ô¤¬ true ¤Î¾ì¹ç¡¢¤Þ¤¿¤Ï (2) ÊÑ¿ô t ¤ÎÃÍ ¡Ê step ¥á¥½¥Ã¥É¤Îµ¯Æ°»þ¹ï ¡Ë ¤¬¡¢e.custom ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤¿»þ¹ï ¡Ê startTime ¡Ë ¤È e,options.duration ¤Î¹ç»»ÃͰʾå¤Î¾ì¹ç¤Ë¤Ï¡¢¤¹¤Ê¤ï¤Á¡¢¥¢¥Ë¥áÄä»ß¤¬»Ø¼¨¤µ¤ì¤¿¤«¡¢¤Þ¤¿¤Ï¥¢¥Ë¥á¤¬µ¯Æ°¤·¤Æ¤«¤é´û¤Ë duration »þ´Ö¤¬·Ð²á¤·¤Æ¤·¤Þ¤Ã¤¿»þÅÀ¤Ç step ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤¿¾ì¹ç¤Ë¤Ï¡¢e.step ¥á¥½¥Ã¥É¤Ï¥¢¥Ë¥á¡¼¥·¥ç¥ó½ªÎ»¸å¤Î°ìÏ¢¤Î½ªÎ»½èÍý¤ò¹Ô¤¤¤Þ¤¹¡£¡Ê #4097 ¡Á 4134 ¡Ë
¤Ò¤È¤Ä¤Ç¤â¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò½ª¤¨¤Æ¤¤¤Ê¤¤¥×¥í¥Ñ¥Æ¥£¤¬¤¢¤ì¤Ð done ¤Ï false ¤È¤Ê¤ê¡¢#4109 ¡Á 4131 ¤Ï¼Â¹Ô¤µ¤ì¤Ê¤¤¤Þ¤Þ #4133 ¤Î false ¤¬ e.custom ¥á¥½¥Ã¥É¤Ë return ¤µ¤ì¤Þ¤¹¡£¸å½èÍý¤ò»Ü¤µ¤Ê¤¤¤Þ¤Þ step ¥á¥½¥Ã¥É¤ò½ª¤¨¤Æ¤·¤Þ¤¦¤ï¤±¤Ç¤¹¡£¡Ê ¢¨ ¤³¤ì¤Ç²Ì¤¿¤·¤ÆÎɤ¤¤Î¤«¡¢µ¿Ì䤬¤¢¤ë¤Î¤Ç¤¹¤¬²ò¾Ã½ÐÍè¤Æ¤¤¤Þ¤»¤ó¡£¡Ë
#4112 ¤Ç¤Ï¥¢¥Ë¥á³«»ÏÁ°¤Ë animate ¥á¥½¥Ã¥É¤Ë¤è¤Ã¤Æ e.options.overflow ¤ËÂÔÈò¤·¤Æ¤ª¤¤¤¿½é´üÃͤò¡¢ÂоÝÍ×ÁǤΠstyle.overflow ¥×¥í¥Ñ¥Æ¥£¤ËÌᤷ¤ÆÉü¸µ¤·¤Þ¤¹¡£
¼¡¤Ë¡¢#4115 ¤Ç¤Ï¡¢e.options.display ¤ËÂÔÈò¤·¤Æ¤ª¤¤¤¿ÃͤòÂоÝÍ×ÁǤΠstyle.display ¥×¥í¥Ñ¥Æ¥£¤ËÌᤷ¤Þ¤¹¡£¤½¤Î¾å¤Ç¡¢#4116 ¡Á 4117 ¤Ç¤Ï¡¢ÂоÝÍ×ÁǤΠdisplay ¥×¥í¥Ñ¥Æ¥£Ãͤ¬ "none" ¤Ê¤é¤Ð ¡Ê null ¤Ç¤Ï¤Ê¤¯ "none" ¤Ç¤¢¤ë¤³¤È¤ËÃí°Õ!! ¡Ë¡¢ÂоÝÍ×ÁǤΠstyle.display ¥×¥í¥Ñ¥Æ¥£¤ò "block" ¤Ë½ñ¤´¹¤¨¤Þ¤¹¡£
¤³¤ÎºÇ¸å¤Î½èÍý¤ÏÈóɽ¼¨¤Ë¤Ê¤Ã¤Æ¤¤¤ëÍ×ÁǤò¶¯À©Åª¤Ë¡Ö°ìö¡×ɽ¼¨¤¹¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
¢£ e.step() ¥á¥½¥Ã¥É¥³¡¼¥É
4093:¡¡// Each step of an animation
4094:¡¡step: function(gotoEnd){
4095:¡¡¡¡var t = now(); // ¸½ºß»þ¹ï¤òÂåÆþ¤¹¤ë¡£
4096:¡¡¡¡// gotoEnd ¤¬¤¢¤ë¤«¡¢t ¤¬½êÄê»þ´Ö¤è¤ê¤âÂ礤¤¾ì¹ç¤Ë¤Ï
4097:¡¡¡¡if ( gotoEnd || t >= this.options.duration + this.startTime ) {
4098:¡¡¡¡¡¡this.now = this.end;
4099:¡¡¡¡¡¡this.pos = this.state = 1;
4100:¡¡¡¡¡¡this.update(); // Í×ÁǤΥ«¥ì¥ó¥È¥µ¥¤¥º¤ò¬¤ë¡£
4101:¡¡¡¡¡¡// curAnim ¤ÎÅö³º¥×¥í¥Ñ¥Æ¥£Ãͤò true ¤È¤¹¤ë¡£
4102:¡¡¡¡¡¡this.options.curAnim[ this.prop ] = true;
4103:
4104:¡¡¡¡¡¡var done = true;
4105:¡¡¡¡¡¡for ( var i in this.options.curAnim )
4106:¡¡¡¡¡¡¡¡if ( this.options.curAnim[i] !== true )
4107:¡¡¡¡¡¡¡¡¡¡done = false; // true¤Ç¤Ê¤±¤ì¤Ð
4108:
4109:¡¡¡¡¡¡if ( done ) { // done===true ¤Ê¤é¤Ð
4110:¡¡¡¡¡¡¡¡if ( this.options.display != null ) { // display ¤¬ null ÃͤǤʤ¤¤Ê¤é¤Ð
4111:¡¡¡¡¡¡¡¡¡¡// Reset the overflow
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // options ¤Î overflow ÃͤòÍ×ÁǤΠoverflow style °À¤ËÂåÆþ¤¹¤ë¡£
4112:¡¡¡¡¡¡¡¡¡¡this.elem.style.overflow = this.options.overflow;
4113:
4114:¡¡¡¡¡¡¡¡¡¡// Reset the display
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // options ¤Î display ÃͤòÍ×ÁǤΠdisplay style °À¤ËÂåÆþ¤¹¤ë¡£
4115:¡¡¡¡¡¡¡¡¡¡this.elem.style.display = this.options.display;
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // display Ãͤ¬ none ¤Ê¤é¤Ð
4116:¡¡¡¡¡¡¡¡¡¡if ( jQuery.css(this.elem, "display") == "none" )
4117:¡¡¡¡¡¡¡¡¡¡¡¡this.elem.style.display = "block"; // block ¤È¤¹¤ë¡£
4118:¡¡¡¡¡¡¡¡}
4119:
4120:¡¡¡¡¡¡¡¡// Hide the element if the "hide" operation was done
4121:¡¡¡¡¡¡¡¡if ( this.options.hide ) // hide ¥×¥í¥Ñ¥Æ¥£¤¬¤¢¤ì¤Ð
4122:¡¡¡¡¡¡¡¡¡¡jQuery(this.elem).hide(); // ±£¤¹¡£
4123:
4124:¡¡¡¡¡¡¡¡// Reset the properties, if the item has been hidden or shown
¡¡¡¡¡¡¡¡¡¡¡¡ // hide Ëô¤Ï show ¥×¥í¥Ñ¥Æ¥£¤¬¤¢¤ì¤Ð
4125:¡¡¡¡¡¡¡¡if ( this.options.hide || this.options.show )
4126:¡¡¡¡¡¡¡¡¡¡for ( var p in this.options.curAnim ) // curAnim ¥ª¥Ö¥¸¥§¥¯¥È¤ò½ä²óÁöºº
¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // style °À¥ª¥Ö¥¸¥§¥¯¥È¤Î p ¥×¥í¥Ñ¥Æ¥£¤ÎÃͤò options.orig[p] ¤È¤¹¤ë¡£
4127:¡¡¡¡¡¡¡¡¡¡¡¡jQuery.attr(this.elem.style, p, this.options.orig[p]);
4128:¡¡¡¡¡¡¡¡¡¡
4129:¡¡¡¡¡¡¡¡// Execute the complete function
4130:¡¡¡¡¡¡¡¡this.options.complete.call( this.elem ); // complete ´Ø¿ô¤ò¼Â¹Ô¤¹¤ë¡£
4131:¡¡¡¡¡¡}
4132:
4133:¡¡¡¡¡¡return false; // false ¤òÊÖ¤¹¡£
4134:¡¡¡¡} else {// °ú¿ô¤¬¤Ê¤¤¤«¡¢t ¤¬½êÄê»þ´Ö°Ê²¼¤Î¾ì¹ç¤Ë¤Ï
4135:¡¡¡¡¡¡var n = t - this.startTime; // ¸½ºß»þ¹ï¤È¥¢¥Ë¥á³«»Ï»þ¹ï¤È¤Îº¹¤ò n ¤ËÂåÆþ¡£
¡¡¡¡¡¡¡¡¡¡ // n ¤ò·Ñ³»þ´Ö¤Ç½ü¤·¤¿Ãͤò state ¤ËÂåÆþ¡£state ¤Ï 1 ̤Ëþ¤ÎÃͤȤʤ롣
4136:¡¡¡¡¡¡this.state = n / this.options.duration;
4137:
4138:¡¡¡¡¡¡// Perform the easing function, defaults to swing
¡¡¡¡¡¡¡¡¡¡ // easing ´Ø¿ô¤ò¼Â¹Ô¤¹¤ë¡£¤½¤ì¤¬»ØÄꤵ¤ì¤Æ¤¤¤Ê¤±¤ì¤Ð swing ´Ø¿ô¤ò¼Â¹Ô¤¹¤ë¡£
¡¡¡¡¡¡¡¡¡¡ // ¤½¤Î»þ¤Î°ú¿ô¤Ï½ç¤Ë this.state, n, 0, 1, this.options.duration
4139:¡¡¡¡¡¡this.pos = jQuery.easing[this.options.easing || (jQuery.easing.swing ? "swing" : "linear")](this.state, n, 0, 1, this.options.duration);
¡¡¡¡¡¡¡¡¡¡ // ½ªÎ»ÅÀ¤«¤é³«»ÏÅÀ¤òº¹¤·°ú¤¤¤Æ¤«¤é¡¢easing ·×»»Ãͤò¾è¤¸¤¿Ãͤò³«»ÏÅÀ¤Ë²Ã»»¤¹¤ë¡£
4140:¡¡¡¡¡¡this.now = this.start + ((this.end - this.start) * this.pos);
4141:
4142:¡¡¡¡¡¡// Perform the next step of the animation
4143:¡¡¡¡¡¡this.update(); // ¼¡¤ÎÃʳ¬¤Ø¿Ê¤à¡£
4144:¡¡¡¡}
4145:
4146:¡¡¡¡return true; // true ¤òÊÖ¤¹¡£
4147:¡¡}
°ú¿ô¡§¤Ê¤·
ÊÖÃÍ¡§¤Ê¤·
µ¡Ç½¡§¥¢¥Ë¥á¤¬¿Ê¹Ô¤·¤Æ¤¤¤ëÍ×ÁǤΥ֥饦¥¶É½¼¨¤ò¹¹¿·¤·¤Þ¤¹¡£
¤³¤Î¥á¥½¥Ã¥É¤Ï animate ¥á¥½¥Ã¥É¤«¤é¸Æ¤Ó½Ð¤µ¤ì¤ë°ìÏ¢¤Î¥á¥½¥Ã¥É¤ÎºÇ¸å¤Ë°ÌÃÖ¤·¤Æ¤¤¤Þ¤¹¡£Ì¾Á°¤ÎÄ̤êɽ¼¨¤ò¹¹¿·¤¹¤ë¥á¥½¥Ã¥É¤Ç¤¹¤¬¡¢ÂçÀڤʤ³¤È¤Ï¤³¤Î¥á¥½¥Ã¥É¤Î¤É¤³¤Ë¤â display = none ¤¬Â¸ºß¤·¤Ê¤¤¤³¤È¤Ç¤¹¡£
¤³¤Î¥á¥½¥Ã¥É¤Ï¡¢step ¥á¥½¥Ã¥É¤«¤é»þ¡¹¹ï¡¹ÅÁ㤵¤ì¤ë¡¢Á«°Ü¤·¤Ä¤Ä¤¢¤ëÂ礤µ¤äÉÔÆ©ÌÀÅÙ¤ÎÃͤò¼õ¤±¼è¤ê¡¢¤½¤ì¤Ë½¾¤Ã¤ÆÍ×ÁǤÎɽ¼¨¾õÂÖ¤ò¹¹¿·¤¹¤ëÌòÌܤòÉé¤Ã¤Æ¤¤¤ë¤Î¤Ç¤¢¤Ã¤Æ¡¢Î㤨³Æ¼ï¥×¥í¥Ñ¥Æ¥£¤Îɽ¼¨¥µ¥¤¥º¤¬¥¼¥í¤È¤Ê¤ê¡¢ÉÔÆ©ÌÀÅÙ¤¬¥¼¥í¤È¤Ê¤Ã¤¿¾ì¹ç¤Ç¤â¡¢display Ãͤò block ¡¢inline ¤Ê¤É¤Î ¡Ê none ¤Ç¤Ï¤Ê¤¤ ¡Ë ɽ¼¨ÍѤÎÃͤËÀßÄꤷ¤¿¤Þ¤Þ¤Çµ¡Ç½¤·¤Þ¤¹¡£·è¤·¤Æ none ¤Ë¤Ï¤·¤Þ¤»¤ó¡£¤³¤Î¤³¤È¤ò¤·¤Ã¤«¤êƧ¤Þ¤¨¤Ê¤±¤ì¤ÐÀ®¤ê¤Þ¤»¤ó¡£
¡Ê#4017¡Ë e.options.step ¥ª¥Ö¥¸¥§¥¯¥È¤¬Â¸ºß¤¹¤ì¤Ð¡¢e.now ¤È e ¤ò°ú¿ô¤Ë¤·¤Æ¡¢¥¢¥Ë¥áÂоÝÍ×ÁǤ«¤é¤½¤ì¤òµ¯Æ°¤·¤Þ¤¹¡£
animate ¥á¥½¥Ã¥É¤ÎÂè 4 °ú¿ô¤ä complete¥×¥í¥Ñ¥Æ¥£¤Ë»ØÄꤹ¤ë´Ø¿ô¤¬¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬½ª¤ï¤Ã¤Æ¤«¤éµ¯Æ°¤µ¤ì¤ë¤Î¤ËÂФ·¤Æ¡¢¤³¤Î e.options.step ¤Ï¡¢¥¢¥Ë¥á¥·¥ç¥ó¤ÎÅÓÃæ¤Ç²¿¤«¤ò¹Ô¤¦¤¿¤á¤Ë¥æ¡¼¥¶¡¼¤¬»ØÄꤹ¤ë´Ø¿ô¤Ç¤¹¡£¿Ê¹ÔÃæ¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¾õÂÖÊÑ¿ô e.state ¤¬ÊѲ½¤¹¤ëÅ٤ˡ¢²¿¤«¤ò¹Ô¤ï¤»¤¿¤¤»þ¤Ë»ÈÍѤ·¤Þ¤¹¡£
¤Ê¤ª¡¢¤³¤Î¥á¥½¥Ã¥É¤Î»ØÄêÊýË¡¤Ï queue ¥×¥í¥Ñ¥Æ¥£¤ÈƱÍÍ¤Ë speed ¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£¤È¤·¤Æ { queue:false, step:function(){}, duration:duration,¡¦¡¦¡¦¡¦} ¤Î¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£¤³¤Î step ´Ø¿ô¤ò»È¤¨¤Ð¡¢¥¢¥Ë¥áÃæ¤Î³Æ¾õÂÖËè¤Ë¡Ö¥¢¥Ë¥á¿ÊĽ¾õ¶·¤Ë´Ø¤¹¤ë¾ðÊó¤òɽ¼¨¤¹¤ë¡×¡¢¡ÖÇØ·Ê¿§¤äʸ»ú¿§¤òÊѤ¨¤ë¡×¤Ê¤É¤¬²Äǽ¤È¤Ê¤ê¤Þ¤¹¡£¤È¤Ï¸À¤¨¿§Âؤ¨¤Ï¤È¤Æ¤â¿ä¾©¤Ç¤¤Þ¤»¤ó¡£ÊѤï¤ëÅ٤˥ǥ£¥¹¥×¥ì¥¤²èÌ̤¬¤Á¤é¤Ä¤¯¤«¤é¤Ç¤¹¡£
#4151 ¡Á 4171 ¤Ë¤è¤Ã¤Æ jquery.js ÆÉ¤ß¹þ¤ß»þ¤Ë speed ¤È step ¥×¥í¥Ñ¥Æ¥£¤¬ jQuery.fx ¥ª¥Ö¥¸¥§¥¯¥È¤ËÄɲ䵤ì¤Þ¤¹¡£ #4020 ¤Ï¤½¤ì¤ò¸Æ¤Ó½Ð¤·¤Æ»ÈÍѤ¹¤ë²Õ½ê¤Ç¤¹¡£
¤³¤³¤Ë¡¢jQuery.fx ¥ª¥Ö¥¸¥§¥¯¥È¤Ï #4001 ¡Á 4009 ¤Ë¤ª¤¤¤ÆÄêµÁ¤µ¤ì¤Æ¤¤¤ë¥³¥ó¥¹¥È¥é¥¯¥¿´Ø¿ô¥ª¥Ö¥¸¥§¥¯¥È¤Ç¡¢¤½¤Î¥¤¥ó¥¹¥¿¥ó¥¹ e ¤ò½Ä²£¤Ë¶î»È¤·¤Æ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬¼Â¸½¤µ¤ì¤Æ¤¤¤ë¤³¤È¤Ï¤³¤ì¤Þ¤Ç¸«¤Æ¤¤¿¤È¤ª¤ê¤Ç¤¹¡£
¤Ç¤Ï jQuery.fx ¥ª¥Ö¥¸¥§¥¯¥È¤ËÄɲ䵤줿 speed ¤È step ¤Î 2 ¤Ä¤Î¥×¥í¥Ñ¥Æ¥£¤È¡¢¥¤¥ó¥¹¥¿¥ó¥¹ e ¤È¤Î´Ø·¸¤Ï¤É¤¦¤Ê¤ë¤Î¤«¡¢Ä¾¤°¤Ëµ¿Ì䤬ͯ¤¤¤Æ¤¤Þ¤¹¡£
Åú¤¨¤Ï´Êñ¤Ç¡¢e ¥¤¥ó¥¹¥¿¥ó¥¹¤Ë¤Ï¤³¤ì¤é¤Î¥×¥í¥Ñ¥Æ¥£¤ÏÅÐÏ¿¤µ¤ì¤Þ¤»¤ó¡£¤³¤ì¤é¤¬¤¤¤ï¤æ¤ë¥¯¥é¥¹¥×¥í¥Ñ¥Æ¥£¤À¤«¤é¤Ç¤¹¡£
°ìÀ£Ã¦Àþ¤·¤Þ¤·¤¿¤¬¡¢ #4020 ¤Ç¤Ï¡¢e.step ¥á¥½¥Ã¥É¤«¤éÅϤµ¤ì¤¿Ãͤò´ð¤Ë¡¢¤³¤Î jQuery.fx ¥ª¥Ö¥¸¥§¥¯¥È¤Î¥¯¥é¥¹¥×¥í¥Ñ¥Æ¥£¤òÍøÍѤ·¤Æ¥Ö¥é¥¦¥¶¾å¤ÇÍ×ÁǤòɽ¼¨¤·¤Þ¤¹¡£
jQuery.fx.step ¥¯¥é¥¹¥×¥í¥Ñ¥Æ¥£¤Ë¤Ï¡¢#4158 ¡Á 4170 ¤Ë¤è¤ê 2 ¤Ä¤Î¥á¥½¥Ã¥É¤¬ÅÐÏ¿¤µ¤ì¤Æ¤¤¤Þ¤¹¡£jQuery.fx.step.opcity() ¤È jQuery.fx.step._default() ¤Ç¤¹¡£#4020 ¤Ë¤ª¤±¤ë°ú¿ô this ¤¬ this ¤Î»ÅÍͤ«¤é¸Æ¤Ó½Ð¤·¸µ¤Î e ¥¤¥ó¥¹¥¿¥ó¥¹¤ò»Ø¤·¤Æ¤¤¤ë¤³¤È¤òƧ¤Þ¤¨¤ì¤Ð¡¢4020¹Ô ¤Ï·è¤·¤ÆÆñ²ò¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¡£Ã¢¤·¡¢¥¤¥ó¥¹¥¿¥ó¥¹¥á¥½¥Ã¥É¤Ç¤¢¤ë e.step ¤È¤ÏÁ´¤¯ÊÌʪ¤Ç¤¢¤ë¤³¤È¤Ëµ¤¤ò¤Ä¤±¤Ê¤±¤ì¤Ð¤Ê¤ê¤Þ¤»¤ó¤¬...¡£
Á°È¾¤Î jQuery.fx.step[this.prop] ¤Ï¡¢¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¡Ê this.prop ¡Ë¤¬ opacity ¤Î»þ¤À¤± true ¤È¤Ê¤ê¡¢jQuery.fx.step.opacity(this) ¤ò¼Â¹Ô¤·¤Þ¤¹¡£¤½¤Î·ë²Ì¡¢#4160 ¡Á4162 ¤Ë¤è¤Ã¤Æ¥¢¥Ë¥áÂоÝÍ×ÁǤΠstyle ¥ª¥Ö¥¸¥§¥¯¥È¤Î opacity ¥×¥í¥Ñ¥Æ¥£¤¬¡¢fx.now ¤È¤Ê¤ê¡¢¸½ºßÃͤÎÉÔÆ©ÌÀÅ٤ǥ¢¥Ë¥áÂоÝÍ×ÁǤ¬ÉÁ²è¤µ¤ì¤Þ¤¹¡£¡Ê elem ¤ò¥¢¥Ë¥áÂоÝÍ×ÁǤȤ·¤Æ¡¢elem.style.opacity = fx.now ¤È¤Ê¤ê¤Þ¤¹¡£¡Ë
¾Êý¡¢e.step ¥á¥½¥Ã¥É¤«¤éÅϤµ¤ì¤¿¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¡Ê this.prop ¡Ë¤¬ opacity ¤Ç¤Ê¤¤¾ì¹ç¤Ë¤Ï¡¢¸åȾÉôʬ¤Î jQuery.fx.step._default(this) ¤¬¼Â¹Ô¤µ¤ì¤Þ¤¹¡£_default() ¥á¥½¥Ã¥É¤Ï¡¢¥¢¥Ë¥áÂоÝÍ×ÁÇ¤Ë style °À¤¬Â¸ºß¤·¡¢¤·¤«¤â style[ this.prop ] ¤¬¶õ¤Ç¤Ê¤¤¾ì¹ç¤Ë¤Ï¡¢ style[ this.prop ] ¤Ëñ°ÌÉÕ¤¤Ç fx.now ¤òÂåÆþ¤·¤Þ¤¹¡£
¤Þ¤¿¡¢¥¢¥Ë¥áÂоÝÍ×ÁÇ¤Ë style °À¤¬Â¸ºß¤·¤Ê¤¤¾ì¹ç¡¢¤¢¤ë¤¤¤Ï¸ºß¤·¤Æ¤â style[ this.prop ] ¤¬¶õ¤Î¾ì¹ç¤Ë¤Ï¡¢Åö³ºÍ×ÁǤΠthis.prop °ÀÃͤòñ°Ì¤Ê¤·¤Ç fx.now ¤È¤·¤Þ¤¹¡£
ʸ¾Ï²½¤¹¤ë¤È¤ï¤«¤ê¤Ë¤¯¤¤¤Î¤Ç¤¹¤¬¡¢¥¢¥Ë¥áÂоÝÍ×ÁǤ¬ width ¤Î¾ì¹ç¤òÎ㼨¤¹¤ì¤Ð¡¢Á°¼Ô¤Ï elem.style.width = fx.now+"px" ¤Ç¤¢¤ê¡¢¸å¼Ô¤Ï elem.width = fx.now ¤È¤¤¤¦¤³¤È¤Ç¤¹¡£
update ¥á¥½¥Ã¥É¤ÎºÇ¸å¤Ç¤Ï¡Ê#4022 ¡Á 4025¡Ë¡¢¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤¬ height ¤Þ¤¿¤Ï width ¤Ç¡¢¤«¤Ä¡¢¥¢¥Ë¥áÂоÝÍ×ÁǤ˥¹¥¿¥¤¥ë¥ª¥Ö¥¸¥§¥¯¥È¤¬Â¸ºß¤¹¤ì¤Ð¡¢¤½¤Î display Ãͤò block ¤È¤·¤Þ¤¹¡£
¤³¤Î¤³¤È¤Î°ÕÌ£¤Ï¡¢inline ¤Ç¤Ï¤Ê¤¯ block ¤Ë¤¹¤ë¤È¤¤¤¦¤³¤È¤Ç¤¢¤ê¡¢·è¤·¤Æ none ¤ò block ¤ËÊѤ¨¤ë¤³¤È¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¡£ºÇ½é¤Ë¿¨¤ì¤¿¤è¤¦¤Ë¡¢update ¥á¥½¥Ã¥É¤Ï·è¤·¤Ædisplay Ãͤò none ¤Ë¤¹¤ë¤³¤È¤Ï¤¢¤ê¤Þ¤»¤ó¡£Ë°¤¯¤Þ¤Ç¤â¡Ö ɽ¼¨ ¡×¤ò¹¹¿·¤¹¤ëÌò³ä¤òô¤Ã¤Æ¤¤¤ë¤«¤é¤Ç¤¹¡£
4015:¡¡// Simple function for setting a style value
4016:¡¡update: function(){
¡¡¡¡¡¡¡¡ // options ¤Ë step ¥×¥í¥Ñ¥Æ¥£¤¬¤¢¤ì¤Ð this.now ¤È this ¤ò°ú¿ô¤È¤·¤Æ
¡¡¡¡¡¡¡¡ // step ¤òµ¯Æ°¤¹¤ë¡£¤³¤³¤Ë step ¤Ï¥æ¡¼¥¶¡¼¤¬ÆÈ¼«¤Ë»ØÄꤹ¤ë¥á¥½¥Ã¥É¤Ç¤¢¤ë¡£
4017:¡¡¡¡if ( this.options.step )
4018:¡¡¡¡¡¡this.options.step.call( this.elem, this.now, this );
4019:¡¡¡¡// this ¤ò°ú¿ô¤È¤·¤Æ jQuery.fx.step[this.prop] ´Ø¿ô
¡¡¡¡¡¡¡¡ // Ëô¤Ï jQuery.fx.step._default´Ø¿ô¤ò¼Â¹Ô¤¹¤ë¡£
4020:¡¡¡¡(jQuery.fx.step[this.prop] || jQuery.fx.step._default)( this );
4021:¡¡¡¡// ¥¢¥Ë¥áÂоݥץí¥Ñ¥Æ¥£¤¬ height ¤Þ¤¿¤Ï width ¤Ç¤¢¤Ã¤Æ¡¢
¡¡¡¡¡¡¡¡ // ¤«¤Ä¡¢¥¢¥Ë¥áÂоÝÍ×ÁǤ˥¹¥¿¥¤¥ë¥ª¥Ö¥¸¥§¥¯¥È¤¬Â¸ºß¤¹¤ì¤Ð
4022:¡¡¡¡// Set display property to block for height/width animations
4023:¡¡¡¡if ( ( this.prop == "height" || this.prop == "width" ) && this.elem.style )
4024:¡¡¡¡¡¡this.elem.style.display = "block"; // style.display ¤ò "block" ¤È¤¹¤ë¡£
4025:¡¡},
¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç¤Ï animate ¥á¥½¥Ã¥É¤Ë¤è¤Ã¤Æ¡¢Ê£¿ô¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òµ¯Æ°¤¹¤ë 2 ¤Ä¤ÎÊýË¡¤Ë¤Ä¤¤¤Æ¹Í»¡¤·¤Þ¤¹¡£Ê£¿ô¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¡¢1 ¤Ä¤º¤Ä½çÈ֤˵¯Æ°¤¹¤ëÊýË¡¤È¡¢³æ¤âƱ»þ¤Ë°ú¤µ¯¤³¤µ¤ì¤Æ¤¤¤ë¤«¤Î¤è¤¦¤ËʹԤ·¤ÆÉ½¼¨¤¹¤ë¨¡¨¡¨¡ ¤³¤¦¤·¤¿ 2 ¤Ä¤Î°Û¤Ê¤ë¥¢¥Ë¥áµ¯Æ°ÊýË¡¤Ë¤Ä¤¤¤Æ¡¢¤½¤Îº¹°Û¤ò¤â¤¿¤é¤¹¥³¡¼¥É¿Ê¹Ô²áÄø¤ò¹Í¤¨¤Æ¤ß¤Þ¤¹¡£
¡Ú opt.queue!==false ¡Ê opt.queue ¤¬ true ¤« undefined ¤Î»þ ¡Ë¤Î¥³¡¼¥É¿Ê¹Ô ¡Û
ËÜÂê¤ËÆþ¤ëÁ°¤ËÃ༡¼Â¹Ô¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¥µ¥ó¥×¥ë¤ò¸«¤Æ¤ß¤Þ¤¹¡£
Ã༡¼Â¹Ô¥¢¥Ë¥á¤Î°ìÎã
¥¢¥Ë¥á¤ÎÃ༡¼Â¹Ô¤È¤Ï¡¢Ê£¿ô¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò 1 ¤Ä¤º¤Ä½çÈ֤˼¹Ԥ¹¤ë¤³¤È¤Ç¤¹¡£Î㤨¤Ð¡¢(1) °¿¤ë¥Ü¥Ã¥¯¥¹¤ò±¦¤Ë 200 ¥Ô¥¯¥»¥ë°Üư¤µ¤»¡¢(2) ÇØ·Ê¿§¤òÊѲ½¤µ¤»¡¢(3) ʸ»ú¥µ¥¤¥º¾®¤µ¤¯¤·¤Æ¤«¤é¤Þ¤¿¿§¤òÊѹ¹¤·¡¢(4) ºÇ¸å¤Ëʸ»ú¥µ¥¤¥º¤òÂ礤¯¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ï°Ê²¼¤Î¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£
¤Ê¤ª¡¢¿§¤Ï animate ¥á¥½¥Ã¥É¤ÎÁàºîÂоݳ°¤Ç¤¹¤«¤é¡¢animate ¥á¥½¥Ã¥É¤Î°ú¿ô¤Ç¤¢¤ë complete ¥á¥½¥Ã¥É¤òÍøÍѤ·¤Æ¥¢¥Ë¥á¡¼¥È¤µ¤»¤Æ¤¤¤Þ¤¹¡£animate ¥á¥½¥Ã¥É¤Çºîư¤µ¤»¤¿¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬½ª¤ï¤ë»þ¤Ë¡¢¿§¤¬ÊѤï¤ë¤è¤¦¤Ë¤·¤¿¤ï¤±¤Ç¤¹¡£
¾å¤ÎÃ༡¼Â¹Ô¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¥¹¥¿¥¤¥ë¥·¡¼¥È¤È¥¹¥¯¥ê¥×¥È¥³¡¼¥É¤Ï°Ê²¼¤Î¤è¤¦¤ËºîÀ®¤·¤Þ¤·¤¿¡£
¢£ ¥¹¥¿¥¤¥ë¥·¡¼¥È
¡¡#animTestIn722, #animTest2In722{
¡¡¡¡¡¡width:200px;background-color:royalblue;
¡¡¡¡¡¡border:2px white solid;font-size:1em;
¡¡¡¡¡¡margin-left:100px;
¡¡}
¢£¥¹¥¯¥ê¥×¥È¥³¡¼¥É
var goSequential = function(){
¡¡$("#animTestIn722").animate({marginLeft:"+=200px"},2000,
¡¡¡¡function(){$(this).css({backgroundColor:"darkgreen"});})
¡¡¡¡.animate({fontSize:"0.75em"},2000,
¡¡¡¡function(){$(this).css({backgroundColor:"indigo"});})
¡¡¡¡.animate({fontSize:"1.5em"},2000,function(){$(this).text("Ã༡¼Â¹Ô¥¢¥Ë¥á½ªÎ»")});
}
var backSequential = function(){
¡¡$("#animTestIn722")
¡¡¡¡.animate({fontSize:"0.75em"},2000,
¡¡¡¡¡¡function(){$(this).css({backgroundColor:"darkgreen"});})
¡¡¡¡.animate({marginLeft:"-=200px"},2000,
¡¡¡¡¡¡function(){$(this).css({backgroundColor:"royalblue"});})
¡¡¡¡.animate({fontSize:"1em"},2000,function(){$(this).text("Ã༡¼Â¹Ô¥¢¥Ë¥á sample")});
}
var startSequential = function(){
¡¡$("#animTestIn722").text("Ã༡¼Â¹Ô¥¢¥Ë¥á sample")
¡¡¡¡.css({backgroundColor:"royalblue",marginLeft:"100px",fontSize:"1em"});
}
var endSequential = function(){
¡¡$("#animTestIn722").text("Ã༡¼Â¹Ô¥¢¥Ë¥á½ªÎ»")
¡¡¡¡.css({backgroundColor:"indigo",marginLeft:"300px",fontSize:"1.5em"});
}
$("#btn1In722").click(function(){
¡¡if ($(this).css("margin-left")!==100+"px") startSequential();
¡¡goSequential();
});
$("#btn2In722").click(function(){
¡¡if ($(this).css("margin-left")!==300+"px") endSequential();
¡¡backSequential();
});
ÌäÂê¤òñ½ã²½¤¹¤ë¤¿¤á¤Ë¡¢¤Þ¤º¡¢°¿¤ë¥¤¥ó¥¹¥¿¥ó¥¹¤«¤é animate ¥á¥½¥Ã¥É¤¬½é¤á¤Æµ¯Æ°¤µ¤ì¤ë¾ì¹ç¤ò¹Í¤¨¤Þ¤¹¡£animate ¥á¥½¥Ã¥É¤ÏÈó¾ï¤ËÊ£»¨¤Ê¥³¡¼¥É¿Ê¹Ô¤ò¤¹¤ë¤Î¤Ç¡¢ÌäÂê¤òñ½ã²½¡¦ºÙʬ²½¤·¤Æ¹Í»¡¤¹¤ëɬÍפ¬¤¢¤ë¤Î¤Ç¤¹¡£
¼¡¤Ë¡¢°Ê¾å¤Ë³¤±¤Æ¡¢Æ±°ì¥¤¥ó¥¹¥¿¥ó¥¹¤Ë 2 ÈÖÌܤΠanimate ¥á¥½¥Ã¥É¤¬Å¬ÍѤµ¤ì¤ë¾ì¹ç¤ò¹Í¤¨¤Æ¤ß¤Þ¤¹¡£ÆÃ¤ËÀè¹Ô¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬Ì¤¤À¿Ê¹ÔÃæ¤ÎÃʳ¬¤Ç¡¢2 ÈÖÌܤΠanimate ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤ë¾ì¹ç¤ò¹Í¤¨¤Æ¤ß¤Þ¤¹¡£
¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎÃ༡µ¯Æ°¤È¤Ï¡¢¤³¤Î¤è¤¦¤Ê¾ì¹ç¤Ç¤â¡¢¸å¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬µ¯Æ°¤µ¤ì¤Ê¤¤¤³¤È¤Ê¤Î¤Ç¤¹¤«¤é...
ËÜÂê¤ËÆþ¤ëÁ°¤ËÊ»¹Ô¼Â¹Ô¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¥µ¥ó¥×¥ë¤ò¸«¤Æ¤ß¤Þ¤¹¡£
Ê»¹Ô¼Â¹Ô¥¢¥Ë¥á¤Î°ìÎã
¥¢¥Ë¥á¤ÎÊ»¹Ô¼Â¹Ô¤È¤Ï¡¢Ê£¿ô¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¤Û¤ÜƱ»þ¤Ë¼Â¹Ô¤¹¤ë¤³¤È¤Ç¤¹¡£Î㤨¤Ð¡¢(1) °¿¤ë¥Ü¥Ã¥¯¥¹¤ò±¦¤Ë 200 ¥Ô¥¯¥»¥ë°Üư¤µ¤»¤Ê¤¬¤é¡¢(2) Ê»¹Ô¤·¤ÆÊ¸»ú¥µ¥¤¥ºÂ礤¯¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ï°Ê²¼¤Î¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£
⤷¡¢¤½¤â¤½¤â¿§¤Ï animate ¥á¥½¥Ã¥É¤ÎÁàºîÂоݳ°¤Ç¤¹¤«¤é¡¢¿§¤ÏÊ»¹Ôµ¯Æ°¤Ç¤¤Þ¤»¤ó¡£animate ¥á¥½¥Ã¥ÉÆâ¤Î complete ¥á¥½¥Ã¥É¤òÍøÍѤ·¤ÆÃ༡µ¯Æ°¤»¤¶¤ë¤òÆÀ¤Þ¤»¤ó¡£
¾å¤ÎÊ»¹Ô¼Â¹Ô¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¥¹¥¯¥ê¥×¥È¥³¡¼¥É¤Ï°Ê²¼¤Î¤è¤¦¤ËºîÀ®¤·¤Þ¤·¤¿¡£¡Ê¥¹¥¿¥¤¥ë¥·¡¼¥È¤Ï¾å¤ÎÃ༡µ¯Æ°¤Î¤â¤Î¤ÈƱ°ì¤Ç¤¢¤ê¡¢¤½¤Á¤é¤ËµºÜ¤·¤Æ¤¢¤ê¤Þ¤¹¡£¡Ë
¢£ ¥¹¥¯¥ê¥×¥È¥³¡¼¥É
var goSidebyside = function(){
¡¡$("#animTest2In722").animate(
¡¡¡¡{marginLeft:"+=200px"},{queue:false,duration:2000,easing:"swing",
¡¡¡¡¡¡complete:function(){$(this).css({backgroundColor:"darkgreen"})}})
¡¡¡¡.animate({fontSize:"1.5em"},2000,function(){$(this).text("Ê»¹Ô¼Â¹Ô¥¢¥Ë¥á½ªÎ»")});
}
var backSidebyside = function(){
¡¡$("#animTest2In722")
¡¡¡¡.animate({fontSize:"1em"},{queue:false,duration:2000,
¡¡¡¡¡¡complete:function(){$(this).css({backgroundColor:"royalblue"})}})
¡¡¡¡.animate({marginLeft:"-=200px"},2000,
¡¡¡¡¡¡function(){$(this).text("Ê»¹Ô¼Â¹Ô¥¢¥Ë¥á sample")});
}
var startSidebyside = function(){
¡¡$("#animTest2In722").text("Ê»¹Ô¼Â¹Ô¥¢¥Ë¥á sample")
¡¡¡¡.css({backgroundColor:"royalblue",marginLeft:"100px",fontSize:"1em"});
}
var endSidebyside = function(){
¡¡$("#animTest2In722").text("Ê»¹Ô¼Â¹Ô¥¢¥Ë¥á½ªÎ»")
¡¡¡¡.css({backgroundColor:"darkgreen",marginLeft:"300px",fontSize:"1.5em"});
}
$("#btn3In722").click(function(){
¡¡if ($(this).css("margin-left")!==100+"px") startSidebyside();
¡¡goSidebyside();
});
$("#btn4In722").click(function(){
¡¡if ($(this).css("margin-left")!==300+"px") endSidebyside();
¡¡backSidebyside();
});
²òÀâ½ñ¤Ë¤Ï¡ÖƱ»þµ¯Æ°¡×¤È¸À¤¦É½¸½¤â¤¢¤ê¤Þ¤¹¤¬¡¢°Ê²¼¤Ë¸«¤ë¤è¤¦¤ËÊ£¿ô¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òÁ´¤¯Æ±»þ¤Ë°ú¤µ¯¤³¤»¤ëÌõ¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¡£¡ÖÀè¹Ô¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬½ª¤ï¤ëÁ°¤Ë¡¢¼¡¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òµ¯Æ°¤¹¤ë¡×°Õ¤Ç¤¹¤«¤é¡¢Àµ³Î¤Ë¤Ï¡Öʹԡ׵¯Æ°¤È¤¤¤¦¤Ù¤¤Ç¤·¤ç¤¦¡£
¤µ¤Æ¡¢queue ¥×¥í¥Ñ¥Æ¥£¤Ë²¿¤â»ØÄꤷ¤Ê¤±¤ì¤Ð¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ï 1 ¤Ä¤º¤ÄÃ༡µ¯Æ°¤µ¤ì¤Þ¤¹¤¬¡¢Ê¹Ե¯Æ°¤Ï¥æ¡¼¥¶¡¼¤¬ opt.queue ¤ÎÃͤò°Õ¿ÞŪ¤Ë false ¤È¤·¤Ê¤¤¸Â¤ê°ú¤µ¯¤³¤»¤Þ¤»¤ó¡£¤³¤³¤Ë opt ¥ª¥Ö¥¸¥§¥¯¥È¤Î queue ¥×¥í¥Ñ¥Æ¥£»ØÄê¤Ï¼¡¤Î¤è¤¦¤Ë¹Ô¤¤¤Þ¤¹¡£
animate ¥á¥½¥Ã¥É¤ÎÂè 2 °ú¿ô speed ¤ò { queue:false, duration:nn, easing:"xyz" } ¤Î¤è¤¦¤Ê¥ª¥Ö¥¸¥§¥¯¥È¤È¤·¤Þ¤¹¡£¤³¤ÎÊýË¡¤Ë¤è¤Ã¤Æ¤Î¤ß opt.queue ¤ò false ¤Ë»ØÄꤹ¤ë¤³¤È¤¬½ÐÍè¤Þ¤¹¡£
Ìü¡¹¡¢jquery ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎÃæ³Ë¤ò¤Ê¤¹ animate ¥á¥½¥Ã¥É¤ò²òÆÉ¤·¤Þ¤¹¡£¤Ê¤ª¡¢¤³¤Î¥á¥½¥Ã¥É¤Ï¿¤¯¤Î¥µ¥Ö¥ë¡¼¥Á¥ó¤ò³¬ÁØÅª¤Ëȼ¤¦¤Î¤Ç¡¢¤½¤Î³¬Áع½Â¤¤Ë¸«¹ç¤Ã¤¿¹½À®¤Çµ½Ò¤·¤Þ¤¹¡£
°ú¿ô¡§½ç¤Ë¥¢¥Ë¥áÍÑCSS¥ª¥Ö¥¸¥§¥¯¥È¡¢¥¢¥Ë¥á·Ñ³»þ´Ö¡¢easing¡¢¥¢¥Ë¥á½ªÎ»»þ¤Î¼Â¹Ô´Ø¿ô¡£Ã¢¤·¡¢speed ¤ò¥ª¥Ö¥¸¥§¥¯¥È·Á¼°¤ÇÍ¿¤¨¤ë¾ì¹ç¤Ë¤ÏÂè 3¡¢Âè 4 °ú¿ô¤Ï¤Ê¤·¡£
ÊÖÃÍ¡§jQuery¥¤¥ó¥¹¥¿¥ó¥¹
µ¡Ç½¡§animate¥á¥½¥Ã¥É¤Ï¸À¤¦¤Þ¤Ç¤â¤Ê¤¯¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎÃæ¿´ÅªÌò³ä¤ò²Ì¤¿¤¹¥á¥½¥Ã¥É¤Ç¡¢Â¿¤¯¤Î¥µ¥Ö¥ë¡¼¥Á¥ó¤òÍøÍѤ·¤Æ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¼Â¸½¤·¤Þ¤¹¡£
°Ê²¼½ç¤Ë¤½¤Î¥µ¥Ö¥ë¡¼¥Á¥ó¤ò¸«¤Æ¤¤¤¤Þ¤¹¡£
ºÇ½é¤Ë¡¢animate ¥á¥½¥Ã¥É¤Î°ú¿ô¤ò¥Á¥§¥Ã¥¯¤·³ÎÄꤷ¡¢ÊÖÃͤȤʤ륪¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£¤òÀ°Íý¤¹¤ë jQuery.speed ¥á¥½¥Ã¥É¤¬Åо줷¤Þ¤¹¡£¤³¤Î¥á¥½¥Ã¥É¤Ç¤Ï£³¤Ä¤Î°ú¿ô¤Î½çÈÖ¤¬¤É¤Î¤è¤¦¤ËÍ¿¤¨¤é¤ì¤Æ¤â¡¢¤½¤Î¥Ç¡¼¥¿·¿¤Ê¤É¤«¤éÆâÍÆ¤¬È½ÃǤµ¤ì¡¢Å¬Àµ¤Ë½èÍý¤µ¤ì¤Þ¤¹¡£
°ú¿ô¡§°ú¿ô¤ÏÁ´¤Æ animate ¥á¥½¥Ã¥É¤«¤éÅϤµ¤ì¤Þ¤¹¡£
ÊÖÃÍ¡§¥ª¥Ö¥¸¥§¥¯¥È¤Ç¼¡¤Î 5 ¤Ä¤Î¥×¥í¥Ñ¥Æ¥£¤ò»ý¤Á¤Þ¤¹¡£ old¡¢complete¡¢queue¡¢duration¡Ê= speed¡Ë¡¢easing¡£¤³¤ÎÊÖÃÍ¥ª¥Ö¥¸¥§¥¯¥È¤ÏÊÑ¿ô optall ¤ËÂåÆþ¤µ¤ì¤Þ¤¹¡£
µ¡Ç½¡§¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎÂè 1 Ãʳ¬¤Î¾ðÊóÀ°Íý¤ò¹Ô¤¤¤Þ¤¹¡£
¤³¤³¤Ë¥¢¥Ë¥á¡¼¥·¥ç¥ó·Ñ³»þ´Ö duration ÃÍ¤Ï 4 ¤Ä¤Î¥±¡¼¥¹Ê̤ËÀßÄꤵ¤ì¤Þ¤¹¡£
Âè 1 ¤Ï jQuery.fx.off ¤¬ true ¤Î»þ¤Ç¤¹¡£¤³¤Î¤È¤¤Ë¤Ï duration Ãͤ¬¥¼¥í¤Ë¤Ê¤ê¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ï½Ö»þ¤ËÍú¹Ô¤µ¤ì¤Þ¤¹¡£
°ìö jQuery.fx.off = true ¤È¤¹¤ë¤È¡¢opt.duration Ãͤ¬¥¼¥í¤Ë¤Ê¤ë¤Î¤Ç¡¢Æ±¤¸Í×ÁǤËÅÐÏ¿¤µ¤ì¤¿¤½¤ì°Ê¹ß¤Ëµ¯Æ°¤µ¤ì¤ëͽÄê¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ï¡¢¤¿¤È¤¨³Æ¡¹¤Î·Ñ³»þ´Ö¤¬¤É¤Î¤è¤¦¤Ë»ØÄꤵ¤ì¤Æ¤¤¤è¤¦¤È¤â¡¢Á´¤Æ duration Ãͤϥ¼¥í¤È¤Ê¤ê¡¢Á´¤Æ½Ö»þ¤Ëµ¯Æ°¤µ¤ì¤Þ¤¹¡£¸À¤¤´¹¤¨¤ì¤ÐÁ´¤Æ¤¬ÁÛÄꤷ¤¿¥¢¥Ë¥á¸å¤Î¾õÂ֤ˤʤê¤Þ¤¹¡£
¤Ê¤ª¡¢ jQuery.fx.off = true ¤Î»ØÄê¤Ï¡¢¥¢¥Ë¥á¤Î·Ñ³»þ´Ö¤ò¥¼¥í¤Ë¤¹¤ë¤Î¤Ç¤¢¤Ã¤Æ¡¢¥¢¥Ë¥á¤½¤Î¤â¤Î¤òÄä»ß¤¹¤ë¤ï¤±¤Ç¤Ï¤¢¤ê¤Þ¤»¤ó¡£¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òÄä»ß¤µ¤»¤ë¥á¥½¥Ã¥É $().stop() ¤È¤Îº¹°Û¤Ëα°Õ¤¹¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£
jQuery.fx.off ¤ÎÃͤϰú¿ô¤Ê¤É¤«¤éÍ¿¤¨¤é¤ì¤Ê¤¤¤Î¤Ç¡¢¥æ¡¼¥¶¡¼¤¬³°ÁÞ¤·¤Þ¤¹¡£
Âè 2 ¤Ï°ú¿ô speed ¤¬¿ôÃÍ·¿¤Î»þ¤Ç¤¹¡£¤³¤Î¤È¤¤Ë¤Ï speed Ãͤ¬¤½¤Î¤Þ¤Þ opt.duration ÃͤȤʤê¤Þ¤¹¡£¡Ê opt ¤Ï speed ¥á¥½¥Ã¥ÉÆâ¤Î¥í¡¼¥«¥ëÊÑ¿ô¡£°Ê²¼Æ±ÍÍ¡Ë
Âè 3 ¤Ï°ú¿ô speed ¤¬¿ôÃÍ·¿¤Ç¤â¥ª¥Ö¥¸¥§¥¯¥È·¿¤Ç¤â¤Ê¤¤¾ì¹ç¤Ç¤¹¡£¤³¤Î¾ì¹ç speed ¤¬ "slow" ¤Ê¤é¤Ð 600 ¤¬¡¢"fast" ¤Ê¤é¤Ð 200 ¤¬¡¢speed ¤¬¤³¤ì¤é¤Î¤¤¤º¤ì¤Ç¤â¤Ê¤¤¾ì¹ç¤Ë¤Ï 400 ¤¬¡¢¤½¤ì¤¾¤ì opt.duration ¤ËÂåÆþ¤µ¤ì¤Þ¤¹¡£¡Ê#3976¡Á3977¡Ë
Âè 4 ¤Ï¡¢speed ¤¬¥ª¥Ö¥¸¥§¥¯¥È·¿¤Î»þ¤Ç¤¹¡£¤³¤Î¾ì¹ç¤Ë¤ÏÅö³º¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£¤Ç¤¢¤ë duration ¤Î¥×¥í¥Ñ¥Æ¥£Ãͤ¬ duration ¤ÎÃͤȤʤë¤À¤±¤Ç¤Ï¤Ê¤¯¡¢¤³¤Î·Á¼°¤Ç°ú¿ô¤ò»ØÄꤹ¤ë»ö¤Ë¤è¤Ã¤Æ½é¤á¤Æ¡¢Ê»¹Ôµ¯Æ°¤Î¤¿¤á¤Î»ØÄê¡Ê options.queue = false ¡Ë¤ä¥¢¥Ë¥á¡¼¥·¥ç¥óÅÓÃæ¤Ç²¿¤«¤ò¹Ô¤ï¤»¤ë¥á¥½¥Ã¥É¤Î»ØÄê¡Ê options.step ¥á¥½¥Ã¥É¡Ë¤¬²Äǽ¤È¤Ê¤ê¤Þ¤¹¡£
speed ¥á¥½¥Ã¥É¤Î 1 ¤Ä¤Î½ÅÍפʺîÍѤȤ·¤Æ¡¢¥¢¥Ë¥á½ªÎ»¸å¤Ëµ¯Æ°¤¹¤ë¥á¥½¥Ã¥É¤ò»ØÄꤹ¤ëÌò³ä¤¬¤¢¤ê¤Þ¤¹¡£
speed ¥á¥½¥Ã¥É¤Ï #3980¡Á3986 ¤Ë¤ª¤¤¤Æ¡¢opt.old ¤Ë animate ¥á¥½¥Ã¥É¤ÎÂè 4 °ú¿ô callback ¤òÂåÆþ¤·¡¢opt.complete ¤Ë¡Ö opt.queue ¤¬ ̤ÄêµÁËô¤Ï true ¤Ê¤é¤Ð¡Ê¤Ä¤Þ¤ê¥¢¥Ë¥á¤òÃ༡µ¯Æ°¤¹¤ë¾ì¹ç¡Ëdequeue¥á¥½¥Ã¥É¤òµ¯Æ°¤·¡¢opt.old ¤¬´Ø¿ô¤Ê¤é¤Ð¤½¤ì¤ò¼Â¹Ô¤¹¤ë ¡×´Ø¿ô¤òÅÐÏ¿¤·¤Þ¤¹¡£
¤³¤¦¤¹¤ë¤³¤È¤Ë¤è¤ê¡¢opt.complete ¤¬¼Â¹Ô¤µ¤ì¤ë¤È 2 ¤ÄËô¤Ï 1 ¤Ä¤Î¤Î¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤Þ¤¹¡£dequeue ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤ë¾ì¹ç¤Ë¤Ï¡¢Åö³ºÍ×ÁǤËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë¼¡¤Î ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬µ¯Æ°¤µ¤ì¡¢opt.old ¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë callback¡Ê ºÇ½é¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó½ªÎ»¸å¤Ëµ¯Æ°¤¹¤ë¤è¤¦ÅÐÏ¿¤µ¤ì¤¿¤â¤Î ¡Ë¤¬´Ø¿ô¤Ê¤é¤Ð¡¢¤½¤ì¤¬µ¯Æ°¤µ¤ì¤Þ¤¹¡£
¹¹¤Ë½ÅÍפʥݥ¤¥ó¥È¤¬¤¢¤ê¤Þ¤¹¡£¤½¤ì¤Ï¥¢¥Ë¥á¤ÎÃ༡µ¯Æ°¤«¡¢Ê¹Ե¯Æ°¤«¤Î»ØÄ꤬¤³¤³¤Ç¹Ô¤ï¤ì¤Æ¤¤¤ë¤³¤È¤Ç¤¹¡£animate ¥á¥½¥Ã¥É¤ÎÂè 2 °ú¿ô speed ¤ò¥ª¥Ö¥¸¥§¥¯¥È·Á¼°¤ÇÍ¿¤¨¡¢¤½¤Î¥×¥í¥Ñ¥Æ¥£ queue ¤ò¥æ¡¼¥¶¡¼¤¬ false ¤È¤·¤Þ¤¹¡£¤³¤Î¾ì¹ç¤Ë¤ÏÂè 3 µÚ¤ÓÂè 4 °ú¿ô¤ÏÉÔÍפǤ¹¡£¤¹¤ë¤È 3983 ¹Ô¤Î jQuery(this).dequeue() ¤Ï opt.complete ¥á¥½¥Ã¥É¤ËÅÐÏ¿¤µ¤ì¤º¡¢¤«¤Ä jQuery(this).queue() ¤Ç¤Ï¤Ê¤¯ jQuery(this).each() ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤Þ¤¹¡£
¤³¤ì¤é¤Î·ë²Ì¡¢¡¢Æ±°ì¥¤¥ó¥¹¥¿¥ó¥¹¤ÎƱ°ìÍ×ÁǤËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ëÊÌ¡¹¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Îµ¯Æ°¤ÏÁê¸ß¤ËÍ޻ߤµ¤ì¤º¡¢¥³¡¼¥É¿Ê¹Ô¤Ë±þ¤¸¤ÆÊ£¿ô¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬Ê¹ÔŪ¤Ëµ¯Æ°¤µ¤ì¤Þ¤¹¡£
¾Êý¡¢ opt.queue ¤ò »ØÄꤷ¤Ê¤¤¤« true ¤È¤¹¤ì¤Ð¡¢3983 ¹Ô¤Î jQuery(this).dequeue() ¤¬ opt.complete ¥á¥½¥Ã¥É¤ËÅÐÏ¿¤µ¤ì¡¢¤«¤Ä jQuery(this).each() ¤Ç¤Ï¤Ê¤¯ jQuery(this).queue() ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤Þ¤¹¡£
¤¹¤ë¤È¡¢Æ±°ì¥¤¥ó¥¹¥¿¥ó¥¹¤ÎƱ°ìÍ×ÁǤËÊ£¿ô¤Î animate ¥á¥½¥Ã¥É¤¬ÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë¾ì¹ç¤Ë¤ª¤¤¤Æ¡¢Àè¹Ô¤¹¤ë ¥¢¥Ë¥á¡¼¥·¥ç¥óÍѥ᥽¥Ã¥É¤¬½ª¤ï¤ê opt.complete ¤¬¸Æ¤Ó½Ð¤µ¤ì¡¢¤½¤ÎÃæ¤Ë¤¢¤ë jQuery(this).dequeue() ¤¬µ¯Æ°¤µ¤ì¤ë¤Þ¤Ç¤Î´Ö¤Ï¡¢¸å¤Ë³¤¯ ¥¢¥Ë¥á¡¼¥·¥ç¥óÍѥ᥽¥Ã¥É¤Ïµ¯Æ°¤òÍ޻ߤµ¤ì³¤±¤Þ¤¹¡£¤½¤·¤ÆÀè¹Ô¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥óÍѥ᥽¥Ã¥É¤Ë¤è¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬½ª¤ï¤ê jQuery(this).dequeue() ¤¬¼Â¹Ô¤µ¤ì¤¿¤½¤Î¸å¤Ë¡¢¸å³¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥óÍѥ᥽¥Ã¥É¤ÎÆâ¡¢ºÇ½é¤Ë°ÌÃÖ¤¹¤ë¤½¤ì¤¬µ¯Æ°¤µ¤ì¡¢Åö³º¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬³«»Ï¤µ¤ì¤Þ¤¹¡£
¤³¤Î¤è¤¦¤Ë speed ¥¯¥é¥¹¥á¥½¥Ã¥É¤È each ¤Þ¤¿¤Ï queue ¥¤¥ó¥¹¥¿¥ó¥¹¥á¥½¥Ã¥É¤ÎÁȤ߹ç¤ï¤»¤Ë¤è¤Ã¤Æ¡¢¥¢¥Ë¥á¤ÎÃ༡µ¯Æ°¤«Ê¹Ե¯Æ°¤«¤¬Ê¬´ô½èÍý¤µ¤ì¤Þ¤¹¡£
°ú¿ô¡§1 ¤Ä¤Î function
ÊÖÃÍ¡§jQuery ¥¤¥ó¥¹¥¿¥ó¥¹
µ¡Ç½¡§¤³¤Î¥á¥½¥Ã¥É¤Ï¥¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥ÉÁ´ÂΤΠ1 ¤Ä¤Îº¬´´Åª°ÌÃÖ¤òÀê¤á¤Æ¤¤¤Þ¤¹¡£¥¤¥ó¥¹¥¿¥ó¥¹¤Î¸Ä¡¹¤ÎÍ×ÁÇËè¡¢¤³¤³¤Î¥×¥í¥Ñ¥Æ¥£Ëè¤Ë¡¢¤½¤ì¤¾¤ì½é´üÃÍ¡¢½ªÎ»ÃÍ¡¢Äê´üŪÊÑÆ°ÃÍ¡¢·Ð²á»þ´ÖÅù¡¹¤òÀßÄꤷ¡¢Áàºî¤·¤Þ¤¹¡£
jQuery.speed ¥á¥½¥Ã¥É¤ÎÊÖÃͤò¼õ¤±¼è¤Ã¤¿ÊÑ¿ô optall ¤Î queue ¥×¥í¥Ñ¥Æ¥£Ãͤˤè¤Ã¤Æ¡¢½èÍý¤¬Ê¬´ô¤µ¤ì¤Þ¤¹¡£¡Ê ¤Ê¤ª¡¢animate ¥á¥½¥Ã¥É¤ÎÂè 2 °ú¿ô speed ¤ò¥ª¥Ö¥¸¥§¥¯¥È·Á¼°¤ÇÍ¿¤¨¡¢¤½¤Î¥×¥í¥Ñ¥Æ¥£ queue ¤ò¥æ¡¼¥¶¡¼¤¬Í¿¤¨¤Ê¤¤¸Â¤ê queue===true ¤Ë»ØÄꤷ¤¿¤³¤È¤ÈƱ°Õ¤Ë¤Ê¤ê¤Þ¤¹¡£queue ¤ò¥æ¡¼¥¶¡¼¤¬Í¿¤¨¤¿¾ì¹ç¤Ë¤Ï¡¢speed ¥á¥½¥Ã¥É¤ÎÊÖÃÍ¥ª¥Ö¥¸¥§¥¯¥È optall ¤Î¥×¥í¥Ñ¥Æ¥£¤Ë queue ¤¬ÀßÄꤵ¤ì¤Þ¤¹¡£¡Ë
optall.queue ¥×¥í¥Ñ¥Æ¥£¤¬ false ¤Î¾ì¹ç¤Ë¤Ï each ¥¤¥ó¥¹¥¿¥ó¥¹¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¡¢°ú¿ô¤Ç¤¢¤ëÍ£°ì¤Î´Ø¿ô¤¬Ìµ¾ò·ï¤Ë¼Â¹Ô¤µ¤ì¤Þ¤¹¡£Â¾Êý¡¢optall.queue ¥×¥í¥Ñ¥Æ¥£¤¬Ì¤ÄêµÁ¤« true ¤Î¾ì¹ç¤Ë¤Ï¡¢queue ¥¤¥ó¥¹¥¿¥ó¥¹¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¡¢¤½¤Î»þÅÀ¤ÇÅö³ºÍ×ÁǤ˴ØÏ¢¤Å¤±¤é¤ì¤Æ¤¤¤ëÂÔ¤Á¹ÔÎóÇÛÎ󤬶õ¤Ê¤é¤Ð¡¢°ú¿ô¤Ç¤¢¤ë´Ø¿ô¤¬¼Â¹Ô¤µ¤ì¡¢ÇÛÎ󤬶õ¤Ç¤Ê¤±¤ì¤Ð¡¢Åö³º´Ø¿ô¤¬ÇÛÎó¤ÎÍ×ÁǤËÄɲ䵤ì¤Þ¤¹¡ÊÄɲ䵤줿´Ø¿ô¤Ï¤³¤Î¤È¤¤Ë¤Ï¼Â¹Ô¤µ¤ì¤Þ¤»¤ó¡Ë¡£
¤³¤Î¤è¤¦¤Ë¤·¤Æ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎƱ»þʹÔŪ¼Â¹Ô¤È¡¢½ç¼¡¼Â¹Ô¤¬¥³¥ó¥È¥í¡¼¥ë¤µ¤ì¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
each ÊÂ¤Ó¤Ë queue ¥¤¥ó¥¹¥¿¥ó¥¹¥á¥½¥Ã¥É¤ÎÄêµÁ¤«¤é¡¢¤¤¤º¤ì¤Î¾ì¹ç¤â¥¤¥ó¥¹¥¿¥ó¥¹¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë³ÆÍ×ÁǥΡ¼¥É¤òÂоݤˤ·¤Æ¡¢½ä²ó½èÍý¤ò¹Ô¤¤¤Þ¤¹¡£°Ê²¼¤Ï¤³¤Î´Ø¿ô¤Î½èÍýÆâÍÆ¤Ç¤¹¡£
Âè°ì°ú¿ô prop ¤ò½èÍý¤¹¤ë¤¿¤á¤ËɬÍ×¤Ê¥í¡¼¥«¥ëÊÑ¿ô¤òÄêµÁ¤·¤Þ¤¹¡£(1) optall ¤«¤é̤ÄêµÁ¥×¥í¥Ñ¥Æ¥£¤ò½ü¤¤¤¿¥×¥í¥Ñ¥Æ¥£¤ò»ý¤Ä opt¡¢(2) hidden °À¤ÎÍ̵¤òÅÐÏ¿¤¹¤ë hidden¡¢(3) jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Ë³ÊǼ¤µ¤ì¤Æ¤¤¤ëÍ×ÁǥΡ¼¥É¤ò»Ø¤·¼¨¤¹ self ¤Ê¤É¤¬ÄêµÁ¤µ¤ì¤Þ¤¹¡£
Âè°ì°ú¿ô prop ¤Ï¥ª¥Ö¥¸¥§¥¯¥È·Á¼°¤ÇÍ¿¤¨¤Þ¤¹¡£¤½¤Î¥×¥í¥Ñ¥Æ¥£Ãͤ¬ hide ¤Ç¡¢ÊÑ¿ô hidden ¤¬Â¸ºß¤¹¤ë¾ì¹ç¡Ê¤Ä¤Þ¤êÅö³ºÍ×ÁǤϱ£ÊúѤߤȤʤäƤ¤¤ë¡Ë¡¢¤¢¤ë¤¤¤Ï¡¢¥×¥í¥Ñ¥Æ¥£Ãͤ¬ show ¤ÇÊÑ¿ô hidden ¤¬Â¸ºß¤·¤Ê¤¤¾ì¹ç¡Ê¤Ä¤Þ¤êÅö³ºÍ×ÁǤÏɽ¼¨ºÑ¤ß¤È¤Ê¤Ã¤Æ¤¤¤ë¡Ë¤Ë¤Ï¡¢opt.complete ¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë´Ø¿ô¤ò¼Â¹Ô¤·¤Þ¤¹¡£
¤³¤ì¤Ï hidden ÊÑ¿ô¤ÎÃͤ«¤é¥¢¥Ë¥á½èÍý¤¬´°Î»¤·¤¿¤È¸«¤Ê¤·¤Æ¡¢¥¢¥Ë¥á´°Î»¸å¤Î¥á¥½¥Ã¥É¤òµ¯Æ°¤¹¤ë¤â¤Î¤Ç¤¹¡£
¤Ê¤ª¡¢opt.complete ¤Ë¤Ï queue Ãͤ˱þ¤¸¤Æ 2 ¤Ä¤Þ¤¿¤Ï 1 ¤Ä¤Î´Ø¿ô¤¬ÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë¤³¤È¡¢¤³¤ì¤Ë¤è¤ê¥¢¥Ë¥á¤ÎƱ»þʹԿʹԤ«¡¢Ã༡¿Ê¹Ô¤«¤¬º¸±¦¤µ¤ì¤ë¤³¤È¤ò²þ¤á¤Æ»×¤¤½Ð¤¹¤Ù¤¤Ç¤·¤ç¤¦¡£¡Ê¾ÜºÙ¤Ï speed ¥á¥½¥Ã¥É¤Î¹à¤ò»²¾È¡Ë
¥×¥í¥Ñ¥Æ¥£Ì¾¤¬ height ¤« width ¤Î¾ì¹ç¤Ç¡¢Åö³ºÍ×ÁǤ¬ style °À¤òͤ¹¤ë¾ì¹ç¡¢opt.display¥×¥í¥Ñ¥Æ¥£¤Ë style.display Ãͤޤ¿¤Ï»»½Ð display ÃͤòÂåÆþ¤·¡¢¤Þ¤¿¡¢style.overflow Ãͤò opt.overflow ¤ËÂåÆþ¤·¤Þ¤¹¡£¤³¤ì¤é¤ÎÁàºî¤Ï¡¢Åö³ºÍ×ÁǤΠdisplay ¥×¥í¥Ñ¥Æ¥£¤È overflow ¥×¥í¥Ñ¥Æ¥£¤Î½é´üÃͤò¡¢opt ¥ª¥Ö¥¸¥§¥¯¥È¤Ëµ²±¤µ¤»¤ë¤â¤Î¤Ç¡¢¥¢¥Ë¥á´°Î»¸å¤Ë¤³¤ì¤é¤Î¥×¥í¥Ñ¥Æ¥£¤ò½é´ü²½¤¹¤ë¤È¤¤Ë»ÈÍѤ·¤Þ¤¹¡£
¤³¤³¤Ë¤ª¤¤¤ÆÎ±°Õ¤¹¤Ù¤ÅÀ¤Ï¡¢¸å¼Ô¤Ï style¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£Ãͤ˸ÂÄꤵ¤ì¤Þ¤¹¤¬¡¢Á°¼Ô¤Ï»»½Ð¥¹¥¿¥¤¥ëÃͤξì¹ç¤â¤¢¤ë¤È¤¤¤¦¤³¤È¤Ç¤¹¡£»»½ÐÃͤÈÄêµÁÃͤȤλȤ¤Ê¬¤±¤È¶èÊ̤ϡ¢°Ê¸å¤Ë¤â¤¿¤Ó¤¿¤ÓÅо줷¤Þ¤¹¤¬¡¢animate ¥á¥½¥Ã¥É¤òÍý²ò¤¹¤ë¾å¤Ç½ÅÍפʥݥ¤¥ó¥È¤Ç¤¹¡£
ÂåÆþ¤µ¤ì¤¿ opt.overflow Ãͤ¬ null ÃͤǤʤ±¤ì¤Ð¡¢¤Ä¤Þ¤ê overflow Ãͤ˲¿¤é¤«¤ÎÃͤ¬ÄêµÁ¤µ¤ì¤Æ¤¤¤ì¤Ð¡¢Í×ÁǥΡ¼¥É¤Î style.overflow °ÀÃͤò hidden ¤È¤·¤Þ¤¹¡£¤³¤ì¤ÏIE6°ÊÁ°¤Î¥Ð¡¼¥¸¥ç¥ó¤ËÂФ¹¤ë¥Ð¥°Âкö¤Ç¤¹¡£¡Ê »²¾È ¢ª Í×ÁǤΤϤ߽Ф·¤Î½èÍý¤ÎÉÔ¶ñ¹ç¡ÊIE/overflow¡Ë¡§¥¹¥¿¥¤¥ë¥·¡¼¥È¡ÊCSS¡Ë¼Åµ - HTML¥¿¥°¥Ü¡¼¥É¡Ë
prop ¥ª¥Ö¥¸¥§¥¯¥È¤Î̤ÄêµÁ°Ê³°¤Î¥×¥í¥Ñ¥Æ¥£¤ò¡¢opt ¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£ curAnim ¤ËÊ£¼ÌÂÔÈò¤·¤Þ¤¹¡£¤³¤ì¤Ï½é´üÃͤòÊݸ¤¹¤ë½èÃ֤Ǥ¢¤ê¡¢¥¢¥Ë¥á½ªÎ»»þ¤Ë¤³¤³¤ÇÊ£¼Ì¤µ¤ì¤¿Ãͤ¬ÍøÍѤµ¤ì¤Þ¤¹¡£
jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Î³ÆÍ×ÁǤò½ä²ó½èÍý¤¹¤ëÃæ¤Ç¡¢¤½¤ì¤¾¤ì¤ÎÍ×ÁÇËè¤Ë¤½¤Î prop ¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£¤ò½ä²ó½èÍý¤·¤Þ¤¹¡£¤Ä¤Þ¤êÆó½Å¤Î½ä²ó½èÍý¤ò¹Ô¤¦¤Î¤Ç¤¹¤¬¡¢¤³¤Î¥·¡¼¥ó¤Ç¡¢Ìü¡¹ jquery ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î´Î¤È¤â¸À¤¦¤Ù¤ jQuery.fx ¥¯¥é¥¹¤¬Åо줷¤Þ¤¹¡£
jQuery.fx ¥¯¥é¥¹¤Î¥¤¥ó¥¹¥¿¥ó¥¹ e ¤òºî¤ê¡¢¤½¤Î³Æ¥×¥í¥Ñ¥Æ¥£¤òÍøÍѤ·¤Æ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¼Â¸½¤·¤Þ¤¹¤¬¡¢¤Þ¤º fx ¥¯¥é¥¹¤ÎÄêµÁ¡Ê#4002-4009¡Ë¤Ë¤è¤ê¡¢¼¡¤Î 3 ¤Ä¤Î°ú¿ô¤¬ e ¤Î¥×¥í¥Ñ¥Æ¥£¤È¤Ê¤ê¤Þ¤¹¡£
(1) e.elem = self¡Ê³ÆÍ×Áǡˡ¢(2) e.options = opt¡Êduration¡¢easing¡¢old¡¢complete¡¢display¡¢curAnim¡¢µÚ¤Ó queue ¤Î³Æ¥×¥í¥Ñ¥Æ¥£¤«¤éÀ®¤ë¥ª¥Ö¥¸¥§¥¯¥È¡Ë¡¢(3) e.prop = name¡Êprop¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£Ì¾¡Ë¤Ç¤¹¡£
¤³¤ì¤é¤Î 3 ¤Ä¤Î¥×¥í¥Ñ¥Æ¥£¤Î¾¤Ë¡¢fx ¥¤¥ó¥¹¥¿¥ó¥¹¤Ë¤Ï¡¢#4013-4149 ¤Ë¤ª¤¤¤Æ prototype ¥ª¥Ö¥¸¥§¥¯¥È¤¬ÄêµÁ¤µ¤ì¡¢update¡¢cur¡¢custom¡¢show¡¢hide¡¢step ¤Î³Æ¥á¥½¥Ã¥É¤¬Éղ䵤졢¹¹¤Ë #4151-4171 ¤Ë¤ª¤¤¤Æ speeds ¤È step ¤È¤¤¤¦¥¯¥é¥¹¥×¥í¥Ñ¥Æ¥£¤âÀßÄꤵ¤ì¤Þ¤¹¡£¤³¤ì¤é¤Ë¤Ä¤¤¤Æ¤Ï¸å½Ò¤·¤Þ¤¹¤¬¡¢Æ±°ì¤Îñ¸ì¤¬°Û¤Ê¤ë°ÕÌ£¤Ç»È¤ï¤ì¤¿¤ê¡¢¥á¥½¥Ã¥ÉÆâ¤ÇÊ̤Υ᥽¥Ã¥É¤¬¸Æ¤Ó½Ð¤µ¤ì¤ë¿½Å¹½Â¤¤Ë¤Ê¤Ã¤Æ¤¤¤ë¤¿¤á¡¢jQuery.fx ¥¤¥ó¥¹¥¿¥ó¥¹ e ¤ÏÈó¾ï¤Ë¤ï¤«¤ê¤Ë¤¯¤¯¤Ê¤Ã¤Æ¤¤¤Þ¤¹¡£
(1) ¤½¤Î¥×¥í¥Ñ¥Æ¥£Ãͤ¬ toggle ¤ÇÅö³ºÍ×ÁÇ¤Ë hidden °À¤¬¤¢¤ì¤Ð¡¢e.show(prop) ¥á¥½¥Ã¥É¤¬¼Â¹Ô¤µ¤ì¡¢(2) ¤½¤Î¥×¥í¥Ñ¥Æ¥£Ãͤ¬ toggle ¤ÇÅö³ºÍ×ÁÇ¤Ë hidden °À¤¬¤Ê¤±¤ì¤Ð¡¢e.hide(prop) ¥á¥½¥Ã¥É¤¬¼Â¹Ô¤µ¤ì¡¢(3)¤½¤Î¥×¥í¥Ñ¥Æ¥£Ãͤ¬ show ¤Ê¤é¤Ð e.show(prop)¤ò¡¢hide¤Ê¤é¤Ð e.hide(prop) ¤¬¼Â¹Ô¤µ¤ì¤Þ¤¹¡£
¤Ê¤ª¡¢¤³¤³¤ÇÅо줹¤ë e ¥¤¥ó¥¹¥¿¥ó¥¹¤Î 2 ¤Ä¤Î¥á¥½¥Ã¥É¡¢e.show(prop)¡¢e.hide(prop) ¤Ë¤Ä¤¤¤Æ¤Ï¸å½Ò¤·¤Þ¤¹¡£
¤³¤Î¥Ö¥í¥Ã¥¯¤Ç¤Ï¡¢prop ¤ÎÃͤ¬¿ôÃͤǻØÄꤵ¤ì¤Æ¤¤¤ë¾ì¹ç¡¢¤Þ¤¿¤Ï toggle¡¢show¡¢hide¤Ç¤â¿ôÃͤǤâ¤Ê¤¤¾ì¹ç¡Ê¶ñÂÎŪ¤Ë¤É¤Î¤è¤¦¤Ê¥×¥í¥Ñ¥Æ¥£Ãͤξì¹ç¤¬¤³¤ì¤Ë³ºÅö¤¹¤ë¤Î¤«¤Ï²òÌÀ¤Ç¤¤Æ¤¤¤Þ¤»¤ó¡Ë¤ÎÂбþ¤¬µ½Ò¤µ¤ì¤Æ¤¤¤Þ¤¹¡£
¤Þ¤º¡¢¿ôÃÍ»ØÄê¤Î¾ì¹ç¤Ë¤Ï¡¢»»½Ð¥¹¥¿¥¤¥ëÃͤòÊÑ¿ô start ¤Ë¡¢prop ¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£ÃͤòÊÑ¿ô end ¤Ë¡¢¤½¤ì¤¾¤ìñ°ÌÉÕ¤¤ÇÅÐÏ¿¤·¤Þ¤¹¡£¤³¤³¤Ç½é´üÃͤȽªÎ»Ãͤ¬ÅÐÏ¿¤µ¤ì¤Þ¤¹¡£px °Ê³°¤Îñ°Ì»ØÄ꤬¤µ¤ì¤Æ¤¤¤ë¾ì¹ç¤Ë¤Ï¡¢»ØÄꤵ¤ì¤¿Ã±°Ìɽ¸½¤Ë³ð¤¦ÃÍ¤Ë start Ãͤ¬´¹»»¤µ¤ì¡¢ÁêÂвøºÃÍ»ØÄê¡Ê+= ¤ä -=¡Ë¤Î¾ì¹ç¤Ë¤âÂбþ¤·¤Æ¤¤¤Þ¤¹¡£
¤³¤¦¤·¤ÆÆÀ¤é¤ì¤¿ start¡¢end µÚ¤Ó unit ¤Î 3 ¤Ä¤Î°ú¿ô¤òȼ¤Ã¤Æ e.custom ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤Þ¤¹¡£
¤Þ¤¿ prop ¤ÎÃͤ¬¿ôÃͤǤâ¤Ê¤¤²¿¤é¤«¤ÎÃÍ¡Êval¤È¤¹¤ë¡Ë¤Î¾ì¹ç¤Ë¤Ï¡¢start¡Ê #3899 ¤Ë¤è¤ê»»½Ð¥¹¥¿¥¤¥ëÃͤ¬Æþ¤Ã¤Æ¤¤¤ë¤Ï¤º ¡Ë¡¢val µÚ¤Ó¶õʸ»ú¤ò¤Î 3¤Ä¤ò°ú¿ô¤È¤·¤Æ e.custom ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤Þ¤¹¤¬¡¢¶ñÂÎŪ¤Ë¤É¤Î¤è¤¦¤Ê¥×¥í¥Ñ¥Æ¥£¤¬¤³¤¦¤·¤¿¥±¡¼¥¹¤Ë³ºÅö¤¹¤ë¤Î¤«Ì¤²òÌÀ¤Ç¤¹¡£
¢£ $().animate ¥á¥½¥Ã¥É
3865:¡¡animate: function( prop, speed, easing, callback ) {
¡¡¡¡¡¡¡¡ // speed ¥á¥½¥Ã¥É¤ÎÊÖÃÍ (object) ¤ò optall ¤ËÂåÆþ¤¹¤ë¡£
3866:¡¡¡¡var optall = jQuery.speed(speed, easing, callback);
3867:¡¡¡¡// queue ¤¬ false ¤Ê¤é¤Ð each ¥á¥½¥Ã¥É¤ò¡¢¤µ¤â¤Ê¤±¤ì¤Ð queue ¥á¥½¥Ã¥É¤ò¼Â¹Ô
3868:¡¡¡¡return this[ optall.queue === false ? "each" : "queue" ](function(){
3869:¡¡¡¡¡¡// ÊÑ¿ôÄêµÁ opt ¤Ë¤Ï optall ¤Î¥×¥í¥Ñ¥Æ¥£¤ÎÆâ̤ÄêµÁ¤Ç¤Ï¤Ê¤¤¤â¤Î¤¬ÂåÆþ¤µ¤ì¤ë¡£
3870:¡¡¡¡¡¡var opt = jQuery.extend({}, optall), p,
¡¡¡¡¡¡¡¡¡¡¡¡ // ¥¤¥Æ¥ì¡¼¥È¤ÎÅÔÅÙ hidden °À¤ÎÍ̵¤ò hidden ¤ËÅÐÏ¿¤¹¤ë¡£
3871:¡¡¡¡¡¡¡¡hidden = this.nodeType == 1 && jQuery(this).is(":hidden"),
3872:¡¡¡¡¡¡¡¡self = this;
3873:¡¡
3874:¡¡¡¡¡¡for ( p in prop ) { // prop ¥ª¥Ö¥¸¥§¥¯¥È¤òÁöºº
¡¡¡¡¡¡¡¡¡¡¡¡ // ¥×¥í¥Ñ¥Æ¥£Ãͤ¬ hide ¤Ç hidden ¤¬ true¡¢¤Þ¤¿¤Ï
¡¡¡¡¡¡¡¡¡¡¡¡ // ¥×¥í¥Ñ¥Æ¥£Ãͤ¬ show ¤Ç hidden ¤¬ false ¤Ê¤é¤Ð
3875:¡¡¡¡¡¡¡¡if ( prop[p] == "hide" && hidden || prop[p] == "show" && !hidden )
¡¡¡¡¡¡¡¡¡¡¡¡ ¡¡// opt ¥ª¥Ö¥¸¥§¥¯¥È¤Î complete ¥á¥½¥Ã¥É¤ò¸Æ½Ð¤·¤òÊÖ¤¹¡£
3876:¡¡¡¡¡¡¡¡¡¡return opt.complete.call(this);
3877:¡¡¡¡¡¡¡¡// ¥×¥í¥Ñ¥Æ¥£Ì¾¤¬ height ¤« width ¤Ç style °À¤¬¤¢¤ì¤Ð
3878:¡¡¡¡¡¡¡¡if ( ( p == "height" || p == "width" ) && this.style ) {
3879:¡¡¡¡¡¡¡¡¡¡// Store display property
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // opt.display¥×¥í¥Ñ¥Æ¥£¤Ë display ÃͤòÂåÆþ¤¹¤ë¡£
3880:¡¡¡¡¡¡¡¡¡¡opt.display = jQuery.css(this, "display");
3881:
3882:¡¡¡¡¡¡¡¡¡¡// Make sure that nothing sneaks out
3883:¡¡¡¡¡¡¡¡¡¡opt.overflow = this.style.overflow; // overflow °ÀÃͤòÂåÆþ¤¹¤ë¡£
3884:¡¡¡¡¡¡¡¡}
3885:¡¡¡¡¡¡}
3886:
3887:¡¡¡¡¡¡if ( opt.overflow != null ) // null¤Ç¤Ê¤±¤ì¤Ð
3888:¡¡¡¡¡¡¡¡this.style.overflow = "hidden"; // overflow Ãͤò hidden ¤È¤¹¤ë¡£
3889:¡¡¡¡¡¡// °ú¿ô prop ¤Î̤ÄêµÁÃͤǤʤ¤¥×¥í¥Ñ¥Æ¥£¤ò opt.curAnim ¤ËÂåÆþ¤¹¤ë¡£
3890:¡¡¡¡¡¡opt.curAnim = jQuery.extend({}, prop);
3891:¡¡¡¡¡¡// prop ¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£Ëè¤ËÁöºº
3892:¡¡¡¡¡¡jQuery.each( prop, function(name, val){
¡¡¡¡¡¡¡¡¡¡¡¡ // $.fx ¥¯¥é¥¹¤Î¥¤¥ó¥¹¥¿¥ó¥¹ e ¤òºî¤ë¡£
3893:¡¡¡¡¡¡¡¡var e = new jQuery.fx( self, opt, name );
3894:¡¡¡¡¡¡¡¡// ¥×¥í¥Ñ¥Æ¥£ÃÍ¤Ë toggle¡¢show¡¢Ëô¤Ï hide ¤¬¤¢¤ë¾ì¹ç¤Ë¤Ï
3895:¡¡¡¡¡¡¡¡if ( /toggle|show|hide/.test(val) )
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // val ¤¬ toggle ¤Ç hidden ¤¬ true ¤Ê¤é¤Ð e.show(prop) ¤ò¼Â¹Ô¤·¡¢
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // val ¤¬ toggle ¤Ç hidden ¤¬ false ¤Ê¤é¤Ð e.hide(prop) ¤ò¼Â¹Ô¤·¡¢
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // val ¤¬ toggle ¤Ç¤Ê¤¤¤Ê¤é¤Ð e.val(prop) ¤ò¼Â¹Ô¤¹¤ë¡£
3896:¡¡¡¡¡¡¡¡¡¡e[ val == "toggle" ? hidden ? "show" : "hide" : val ]( prop );
3897:¡¡¡¡¡¡¡¡else { // ¥×¥í¥Ñ¥Æ¥£ÃÍ¤Ë toggle¡¢show¡¢µÚ¤Ó hide ¤¬¤Ê¤¤¾ì¹ç¤Ë¤Ï
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // val¤òʸ»úÎó¤ËÊÑ´¹¤·¤Æ¤«¤é match ¥á¥½¥Ã¥É¤ÇÄ´¤Ù¡¢ºÇ½é¤Ë¸«¤Ä¤«¤ë
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // +=¿ôÃÍ Ëô¤Ï -=¿ôÃÍ ¡¢¤¢¤ë¤¤¤Ï¿ôÃͤòÊÑ¿ô parts ¤ËÂåÆþ¤¹¤ë¡£
3898:¡¡¡¡¡¡¡¡¡¡var parts = val.toString().match(/^([+-]=)?([\d+-.]+)(.*)$/),
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ ¡¡¡¡// e.cur(true) ¼Â¹Ô·ë²Ì¤¬¤¢¤ì¤Ð¡¢ÊÑ¿ô start ¤Ë¤½¤ì¤òÂåÆþ¤¹¤ë¡£
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ ¡¡¡¡// ¤³¤³¤Ë e.cur(true) ¤Ï¡¢jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤ËÅÐÏ¿¤µ¤ì¤Æ
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ ¡¡¡¡// ¤¤¤ë³ÆÍ×ÁǤ¬»ý¤Ä¡¢Åö³º¥×¥í¥Ñ¥Æ¥£Ì¾¤Î¥¿¥°Â°ÀÃͤޤ¿¤Ï
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ ¡¡¡¡// ¥«¥ì¥ó¥È¥¹¥¿¥¤¥ëÃͤò px ñ°Ì¤Ç¼èÆÀ¤¹¤ë¥á¥½¥Ã¥É¤Ç¤¢¤ë¡£
3899:¡¡¡¡¡¡¡¡¡¡¡¡¡¡start = e.cur(true) || 0; // ¤Ê¤±¤ì¤Ð 0¤òÂåÆþ¤¹¤ë¡£
3900:
3901:¡¡¡¡¡¡¡¡¡¡if ( parts ) { // parts ¤¬Â¸ºß¤¹¤ì¤Ð
3902:¡¡¡¡¡¡¡¡¡¡¡¡var end = parseFloat(parts[2]), // /[\d+-.]+/ ¤ÎÃͤòÊÑ¿ô end ¤Ë ÂåÆþ¡£
3903:¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡unit = parts[3] || "px"; // ñ°Ì̾¾Î¤ò ÊÑ¿ô unit ¤ËÂåÆþ¡£
3904:¡¡¡¡¡¡¡¡¡¡¡¡// start Ãͤò½êÄê¤Îñ°Ì¤Ë´ð¤Å¤¯ÃͤËÊÑ´¹¤¹¤ë¡£
3905:¡¡¡¡¡¡¡¡¡¡¡¡// We need to compute starting value
3906:¡¡¡¡¡¡¡¡¡¡¡¡if ( unit != "px" ) { // ñ°Ì̾¤¬ px ¤Ç¤Ê¤¤¾ì¹ç
¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // ¿ôÃͤÈñ°Ì̾¤òÏ¢·ë¤·¤Æ end ÃͤËÂбþ¤¹¤ë name ¥¹¥¿¥¤¥ëÃͤòÀßÄꤹ¤ë¡£
3907:¡¡¡¡¡¡¡¡¡¡¡¡¡¡self.style[ name ] = (end || 1) + unit;
¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // ½êÄêñ°Ì¤Ë¤è¤ë endÃÍ ¤ò px ñ°Ì¤Ë¤è¤ë end ÃÍ¡Úe.cur(true)¡Û¤Ç½ü¤·¡¢
¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // ¤½¤ÎÈæÎ¨¤Ë px ñ°Ì¤Ë¤è¤ë start Ãͤò¾è¤¸¤Æ½êÄêñ°Ì¤Î start ÃͤòÆÀ¤ë¡£
3908:¡¡¡¡¡¡¡¡¡¡¡¡¡¡start = ((end || 1) / e.cur(true)) * start;
¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // ½êÄêñ°ÌÃÍ¤Ç name ¥¹¥¿¥¤¥ëÃͤòÀßÄꤹ¤ë¡£
3909:¡¡¡¡¡¡¡¡¡¡¡¡¡¡self.style[ name ] = start + unit;
3910:¡¡¡¡¡¡¡¡¡¡¡¡}
3911:
3912:¡¡¡¡¡¡¡¡¡¡¡¡// If a +=/-= token was provided, we're doing a relative animation
3913:¡¡¡¡¡¡¡¡¡¡¡¡if ( parts[1] ) // ÁêÂвøºÃͤ¬»ØÄꤵ¤ì¤Æ¤¤¤ë¾ì¹ç¤Ë¤Ï
¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // start ÃÍ¤Ë end Ãͤò²Ã¸º¤¹¤ë¡£
3914:¡¡¡¡¡¡¡¡¡¡¡¡¡¡end = ((parts[1] == "-=" ? -1 : 1) * end) + start;
3915:
3916:¡¡¡¡¡¡¡¡¡¡¡¡e.custom( start, end, unit ); // custom ¥á¥½¥Ã¥É¤òµ¯Æ°
3917:¡¡¡¡¡¡¡¡¡¡} else // parts ¤¬Â¸ºß¤·¤Ê¤¤¾ì¹ç
3918:¡¡¡¡¡¡¡¡¡¡¡¡e.custom( start, val, "" ); // end ÃÍ¤Ï val ¤Ç¡¢unit ¤Ï¤Ê¤·¤Çcustomµ¯Æ°
3919:¡¡¡¡¡¡¡¡}
3920:¡¡¡¡¡¡}); // each ¥á¥½¥Ã¥É½ªÎ»
3921:
3922:¡¡¡¡¡¡// For JS strict compliance
3923:¡¡¡¡¡¡return true;
3924:¡¡¡¡}); // ¡ô3868 ¤Î each or queue ¥á¥½¥Ã¥É½ªÎ»
3925:¡¡},
¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç¤Ï¡¢jquery ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ç³èÍѤµ¤ì¤ë´ðËÜŪ¤Ê¼¡¤Î 5 ¤Ä¤Î´Ø¿ô¤ä¥á¥½¥Ã¥É¤ò²òÆÉ¤·¤Þ¤¹¡£
genFx¡¢show¡¢hide¡¢toggle¡¢fadeTo
°ú¿ô¡§Âè 1 °ú¿ô¤Î type ¤Ë¤Ï show ¡¢hide Ëô¤Ï toggle ¤òÂåÆþ¤·¡¢Âè 2 °ú¿ô num ¤Ë¤Ï 1¡Á3 ¤òÂåÆþ¤·¤ÆÍøÍѤ·¤Þ¤¹¡£
ÊÖÃÍ¡§¥ª¥Ö¥¸¥§¥¯¥È
µ¡Ç½¡§ÇÛÎó fxAttrs ¤«¤é¥×¥í¥Ñ¥Æ¥£Ì¾¤ò CSS style °À̾¡¢¥×¥í¥Ñ¥Æ¥£Ãͤò type ¤È¤¹¤ë¥ª¥Ö¥¸¥§¥¯¥È¤òÀ¸À®¤·¤Þ¤¹¡£
¤³¤Î´Ø¿ô¤Ï¡¢Í×ÁǤò ¡ÖÈóɽ¼¨ ¢ª ɽ¼¨¤Ø¡×¡¢¡Öɽ¼¨ ¢ª Èóɽ¼¨¤Ø¡×¡¢¡Öɽ¼¨/Èóɽ¼¨¤Î½Û´Ä¡×¤È¥¢¥Ë¥á¡¼¥È¤µ¤»¤ë¤¿¤á¤Ë¡¢animate ¥á¥½¥Ã¥É¤ÎÂè 1 °ú¿ô¤Ç¤¢¤ë prop ¥ª¥Ö¥¸¥§¥¯¥È¤òºîÀ®¤¹¤ë¤â¤Î¤Ç¤¹¡£CSS ¥¹¥¿¥¤¥ëÃͤò toggle¡¢show¡¢hide ¤È¤¹¤ë¤Î¤ÇºÇ½é¤Ï°ãÏ´¶¤¬¤¢¤ê¤Þ¤¹¡£¤·¤«¤·¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎÁ´ÍƤòÍý²ò¤¹¤ì¤Ð¡¢¤³¤Î´Ø¿ô¤ÎɬÍ×À¤ä½ÅÍ×À¤¬Íý²ò¤Ç¤¤Þ¤¹¡£
¢£genFx( type, num ) ´Ø¿ô¥³¡¼¥É²òÆÉ
3765:var elemdisplay = {}, // ¥È¥Ã¥×¥ì¥Ù¥ë¤Ç 3 ¤Ä¤ÎÊÑ¿ô¤òÄêµÁ¤¹¤ë¡£
3766:¡¡timerId,
3767:¡¡fxAttrs = [
3768:¡¡¡¡// height animations
3769:¡¡¡¡[ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],
3770:¡¡¡¡// width animations
3771:¡¡¡¡[ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],
3772:¡¡¡¡// opacity animations
3773:¡¡¡¡[ "opacity" ]
3774:¡¡];
3775:
3776:function genFx( type, num ){
3777:¡¡var obj = {};
¡¡¡¡¡¡ // each ŬÍÑÂÐ¾Ý¤Ï num==1 ¤Ê¤é¤Ð ["height",ޥޥޥ,"paddingBottom"]¡¢
¡¡¡¡¡¡ // num==3 ¤Ê¤é¤Ð ["height",ޥޥޥ,"paddingBottom","width",ޥޥޥ,"opacity"] ¤È¤Ê¤ë¡£
3778:¡¡jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice(0,num)), function(){
3779:¡¡¡¡obj[ this ] = type; // each ŬÍÑÂоݤ´¤È¤Ë type ÃͤòÂåÆþ¤·¡¢
3780:¡¡});
3781:¡¡return obj; // obj={ height:type, marginTop:type, ޥޥޥ} ¤È¤Ê¤ë¡£
¡¡¡¡¡¡// ¤Ä¤Þ¤ê¡¢ÊÖÃÍ¤Ï CSS style °À̾¤ò¥×¥í¥Ñ¥Æ¥£Ì¾¤È¤·¡¢
¡¡¡¡¡¡// type ¤ò¥×¥í¥Ñ¥Æ¥£ÃͤȤ¹¤ëÊ£¿ô¤Î¥×¥í¥Ñ¥Æ¥£¤«¤é¤Ê¤ë¥ª¥Ö¥¸¥§¥¯¥È¤È¤Ê¤ë¡£
3782:}
°ú¿ô¡§¥¢¥Ë¥á¤Î·Ñ³»þ´Ö¡¢¥¢¥Ë¥á½ªÎ»¸å¤Ëµ¯Æ°¤µ¤»¤ëcallback ´Ø¿ô
ÊÖÃÍ¡§jQuery ¥¤¥ó¥¹¥¿¥ó¥¹
µ¡Ç½¡§¸À¤¦¤Þ¤Ç¤â¤Ê¤¯ jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ëÍ×ÁǤòɽ¼¨¤µ¤»¤ë¥á¥½¥Ã¥É¤Ç¤¹¡£
Í×ÁǤΠdisplay ¥×¥í¥Ñ¥Æ¥£Ãͤϡ¢block ¤À¤±¤Ç¤Ï¤Ê¤¯ inline ¤ä¤½¤Î¾¤Î»ØÄê¤â¤¢¤ê¤Þ¤¹¡Ê inline-block¡¢table¡¢inline-table Åù¡¹ ¡Ë¡£¤Ç¤¹¤«¤é¡¢¡Ö¤³¤Î¥á¥½¥Ã¥É¤Ï°ú¿ô¤òÍ¿¤¨¤Ê¤±¤ì¤Ð¡¢Ã±¤Ë display="block" ¤È¤¹¤ë¤À¤±¤Îñ½ã¤Ê´Ø¿ô¤À¤í¤¦¡×¤È¤Î¿ä¬¤Ï¡¢¸«»ö¤Ë΢ÀÚ¤é¤ì¤Æ¤·¤Þ¤¤¤Þ¤¹¡£
¥³¡¼¥É¤Ï£²¤Ä¤ÎÉôʬ¤«¤éÀ®¤ê¡¢°ú¿ô¤¬¤¢¤ë¾ì¹ç¤Ë¤Ï animate ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤Þ¤¹¤¬¡¢¤½¤Î²òÀâ¤Ï animate ¥á¥½¥Ã¥É¤Î¹à¤Ë¾ù¤ê¡¢¤³¤³¤Ç¤Ï°ú¿ô¤¬¤Ê¤¤¾ì¹ç¤Î show ¥á¥½¥Ã¥É¤Î¿Ê¹Ô¤òÀ×ÉÕ¤±¤Þ¤¹¡£
Âè°ì¤Ï¡¢hide ¥á¥½¥Ã¥É¤âƱÍͤǤ¹¤¬¡¢Åö³º¥á¥½¥Ã¥É¤¬Æ±°ì¥¤¥ó¥¹¥¿¥ó¥¹¤ËÂФ·¤ÆÊ£¿ô²ó¸Æ¤Ó½Ð¤µ¤ì¤¿¾ì¹ç¤ÎÂбþ¤Ë¤Ä¤¤¤Æ¤Ç¤¹¡£2 ÅÙÌܰʹߤθƤӽФ·¤ËÂФ·¤Æ¾ÊÎϲ½¤Î»ÅÁȤߤ¬ÁȤ߹þ¤Þ¤ì¤Æ¤ª¤ê¡¢¤½¤Î¤³¤È¤ä¤½¤Î°ÕµÁ¤òÍý²ò¤¹¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£
ÂèÆó¤Ï¡¢display ¥×¥í¥Ñ¥Æ¥£¤Ë¤Ä¤¤¤Æ¡¢¤½¤Î»»½Ð¡Ê IE ¤Î¾ì¹ç¤Ë¤Ï¡Ö¥«¥ì¥ó¥È¡×¤È¸Æ¤Ö¤³¤È¤¬Â¿¤¤¡Ë¥¹¥¿¥¤¥ëÃÍ¤È style ¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£ÃͤζèÊ̤òÍý²ò¤·¤Ê¤±¤ì¤Ð¤Ê¤é¤Ê¤¤¤È¤¤¤¦¤³¤È¤Ç¤¹¡£ÌÀ¼¨Åª¤Ê¥¹¥¿¥¤¥ëÀßÄê¤È°ÅÌÛ΢¤ËÀßÄꤵ¤ì¤ë¥¹¥¿¥¤¥ëÃͤÏÊÌʪ¤Ç¤¢¤ë¤³¤È¤òƧ¤Þ¤¨¤Ê¤±¤ì¤Ð¤Ê¤ê¤Þ¤»¤ó¡£
°Ê¾å¤Î¤³¤È¤òƧ¤Þ¤¨¤Æ¥³¡¼¥É¿Ê¹Ô¤ò¸«¤Æ¤ß¤Þ¤¹¡£
¼¡¤Ë¡¢Æ±¤¸Í×ÁǤËÂФ·¤ÆÆóÅٰʾå¤Î show ¥á¥½¥Ã¥É¤òŬÍѤ·¤¿¾ì¹ç¤òÀ×ÉÕ¤±¤Þ¤¹¡£
¤³¤Î¾ì¹ç¤Ë¤Ï¡¢´û¤Ë°ìÅÙÌܤΠshow ¥á¥½¥Ã¥ÉŬÍѤˤè¤Ã¤Æ¡¢ÊÑ¿ô elemdisplay ¥ª¥Ö¥¸¥§¥¯¥È¤ÎÅö³ºÍ×ÁÇ¤ÈÆ±°ì¤Î¥¿¥°¥Í¡¼¥à¥×¥í¥Ñ¥Æ¥£Ãͤ¬ none °Ê³°¤È¤Ê¤Ã¤Æ¤ª¤ê¡¢¤«¤ÄÅö³ºÍ×ÁÇ¤Ë¤Ï olddisplay ̾¤Ç none °Ê³°¤Î display °ÀÃͤ¬¥Æ¥¥¹¥Èʸ»úÎó¤Ç´ØÏ¢¤Å¤±¤é¤ì¤Æ¤¤¤Þ¤¹¡£
¤³¤Î·ë²Ì¡¢3792 ¹Ô¤Ë¤è¤êÅö³ºÍ×ÁǤΠstyle ¥ª¥Ö¥¸¥§¥¯¥È¤Î display Ãͤ¬ none °Ê³°¤ÎÃͤËÀßÄꤵ¤ì¡¢¹¹¤Ë constant reflow ¤òÈò¤±¤ë¤¿¤á¤ËÀߤ±¤é¤ì¤¿ 3817 ¹Ô¤Ë¤è¤ê¡¢ºÆÅÙ style.display Ãͤ¬ none °Ê³°¤Î block Åù¤È¤Ê¤ê¤Þ¤¹¡£
¤Ê¤ª¡¢constant reflow ¤òľÌõ¤¹¤ì¤Ð¡ÖÄê´üŪ¤ÊºÆÎ®¡×¤Ç¤¹¤¬¡¢¤³¤ì¤Ç¤Ï²¿¤Î¤³¤È¤«³§ÌÜʬ¤«¤ê¤Þ¤»¤ó¡£¥Í¥Ã¥È¸¡º÷¤·¤Æ¤ß¤Þ¤·¤¿¤¬Ì¤²òÌÀ¤Ç¤¹¡£
¤È¤³¤í¤Ç¡¢Åö½é¤Ï show ¥á¥½¥Ã¥É¤Ïñ½ã¤Ë if (this[i].style.display=="none") this[i].style.display="block" ¤È¤¹¤ë¤À¤±¤ÇÍѤ¬Â¤ê¤ë¤È»×¤Ã¤Æ¤¤¤Þ¤·¤¿¤«¤é¡¢¤É¤¦¤·¤Æ¤³¤Î¤è¤¦¤ËÊ£»¨¤Ê¥³¡¼¥É¤Ë¤Ê¤Ã¤Æ¤¤¤ë¤Î¤«¡¢¤½¤ÎÍýͳ¤ò¤³¤³¤Ç¹Í¤¨¤Æ¤ß¤¿¤¤¤È»×¤¤¤Þ¤¹¡£
¤Þ¤º¡¢elemdisplay ¥ª¥Ö¥¸¥§¥¯¥È¤Î¸ºß°ÕµÁ¤Ç¤¹¡£¤É¤¦¤·¤Æ¥È¥Ã¥×¥ì¥Ù¥ë¤ÎÊÑ¿ô¤Ë¡¢ÂоݤȤ·¤Æ¤¤¤ëÍ×ÁÇ¤ÈÆ±°ì¤Î¥¿¥°¥Í¡¼¥à¥×¥í¥Ñ¥Æ¥£¤òÀߤ±¡¢¤½¤ÎÃͤò none °Ê³°¤È¤¹¤ë¤Î¤Ç¤·¤ç¤¦¤«¡£¤¢¤¿¤«¤âƱ°ì¥¿¥°Ì¾¾Î¤ÎÍ×ÁǤΠdisplay ¥×¥í¥Ñ¥Æ¥£Ãͤò¡¢1 ¤Ä¤ËÅý°ì¤¹¤ëɬÍפ¬¤¢¤ë¤«¤Î¤è¤¦¤Ç¤¹¡£
Î㤨¤Ð¡¢¤¢¤ë p ¥¿¥°¤Î n ÈÖÌܤÎÍ×ÁÇ¡Ê p(n)¤È̾ÉÕ¤±¤ë ¡Ë¤ò show ¥á¥½¥Ã¥É¤Çɽ¼¨¤µ¤»¤¿¤È¤·¤Þ¤¹¡£¤¹¤ë¤È elemdisplay.p = "block" ¤È¤Ê¤ê¡¢p ¥¿¥°¤Î n ÈÖÌܰʳ°¤ÎÍ×ÁÇ¡Ê p(m)¤È¸Æ¤Ö ¡Ë¤Ë show ¥á¥½¥Ã¥É¤òŬÍѤ¹¤ë¾ì¹ç¤Ë¤Ï¡¢#3799¡Á3809 ¤¬¥¹¥ë¡¼¤µ¤ì¡¢#3811 ¤Ç olddisplay ̾¤Çʸ»úÎó block ¤¬ p(m) ¤Ë´ØÏ¢¤Å¤±¤é¤ì¡¢ºÇ¸å¤Ë #3818 ¤Ë¤è¤Ã¤Æ p(m) ¤Î display Ãͤ¬ block ¤È¤Ê¤ê¡¢¥Ö¥é¥¦¥¶¾å¤Ë p(m) Í×ÁǤ¬É½¼¨¤µ¤ì¤Þ¤¹¡£
append ¹Ô°Ù¤òƱ°ì̾¾Î¤ÎÍ×ÁǤËÂФ·¤Æ 2 Åٰʾå°ú¤µ¯¤³¤µ¤»¤Ê¤¤¸úΨ²½¤¬ÌÜŪ¤Ê¤Î¤«¤â¤·¤ì¤Þ¤»¤ó¡£Ã¢¤·¡¢¤½¤ì°Ê³°¤ÎÌÜŪ¤¬¤¢¤ë¤«¤É¤¦¤«¡¢¤Þ¤¿¡¢¤¢¤ë¤È¤¹¤ì¤Ð²¿¤«¤Ë¤Ä¤¤¤Æ¤Ï²òÌÀ¤Ç¤¤Æ¤¤¤Þ¤»¤ó¡£
¼¡¤Ë¡¢Æ±°ì¥¿¥°Ì¾¤ÎÍ×ÁǤò ¤ï¤¶¤ï¤¶ append ¤¹¤ë¤Î¤Ï²¿¸Î¤Ç¤·¤ç¤¦¤«¡£
¤½¤ì¤Ï¼¡¤Î¤è¤¦¤ÊÍýͳ¤Ë¤è¤ë¤È¹Í¤¨¤é¤ì¤Þ¤¹¡£
body ¤ËÂоÝÍ×ÁÇ¤ÈÆ±°ì¥¿¥°Ì¾¾Î¤ÎÍ×ÁǤòÄɲä·¡¢¤½¤Î»»½Ð¡Ê¥«¥ì¥ó¥È¡Ë display °À¤òÄ´¤Ù¤ì¤Ð¡¢¤½¤Î¥µ¥¤¥È¤Ë¤ª¤¤¤Æ¡¢Åö³º¥¿¥°¤¬¤É¤Î¤è¤¦¤Ê display Ãͤò¤È¤Ã¤Æ¤¤¤ë¤Î¤«Çİ®¤¹¤ë¤³¤È¤¬½ÐÍè¤Þ¤¹¡£¤³¤ÎÊýË¡¤Ë¤è¤Ã¤Æ¡¢Åö³º¥¿¥°¤¬¥µ¥¤¥ÈÆâ¤Çͤ¹¤ë»»½Ð¡Ê¥«¥ì¥ó¥È¡Ëdisplay Ãͤò¼èÆÀ¤¹¤ë¤³¤È¤Ë¤·¤¿¤Î¤Ç¤·¤ç¤¦¡£
¤³¤ì¤ËÂФ·¤Æ¡¢olddisplay ̾¤Ë¤è¤ëÍ×ÁǤؤΠnone °Ê³°¤Îʸ»úÎó¤Î´ØÏ¢¤Å¤±¤Ï¡¢Ê¬¤«¤ê¤ä¤¹¤¤¤â¤Î¤Ç¤¹¡£jQuery.data ¥á¥½¥Ã¥É¤òÍøÍѤ¹¤ë¤Î¤Ï¡¢°ìÅÙÅö³ºÍ×ÁǤΠdisplay °ÀÃͤò none °Ê³°¤ËÅÐÏ¿¤·¤¿Í×ÁǤËÂФ·¤Æ¡¢ÆóÅÙÌܰʹߤϤ³¤ÎÅÐÏ¿ºÑ¤ßʸ»úÎó¤òÍøÍѤ·¤ÆÍÆ°×¤Ë display ÃͤòƱ¤¸ÃͤËÀßÄꤹ¤ë¤¿¤á¤Ç¤¹¡£show ¥á¥½¥Ã¥É¤Ë¤ª¤¤¤Æ¤â hide ¥á¥½¥Ã¥É¤Ë¤ª¤¤¤Æ¤â¡¢jQuery.data ¥á¥½¥Ã¥É¤¬¤·¤Ã¤«¤ê³è¤«¤µ¤ì¤Æ¤¤¤Þ¤¹¡£
¢£$().show ¥á¥½¥Ã¥É¥³¡¼¥É²òÆÉ
3785:¡¡show: function(speed,callback){
3786:¡¡¡¡if ( speed ) { // °ú¿ô speed ¤¬ÄêµÁ¤µ¤ì¤Æ¤¤¤ì¤Ð
¡¡¡¡¡¡¡¡¡¡// ¡ÖgenFx("show",3 )¤ò CSS ¥¹¥¿¥¤¥ëÃÍ¡¢speed ¤ò¥¢¥Ë¥á½êÍ×»þ´Ö¤È¤·¡¢
¡¡¡¡¡¡¡¡¡¡// callback ´Ø¿ô¤ò¥¢¥Ë¥á½ªÎ»¸å¤Ëµ¯Æ°¤¹¤ë animate¥á¥½¥Ã¥É¤ò¡¢
¡¡¡¡¡¡¡¡¡¡// jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤«¤é¸Æ¤Ó½Ð¤·¤Æ¼Â¹Ô¤·¡¢¤½¤ÎÊÖÃͤòÊÖ¤¹¡£
3787:¡¡¡¡¡¡return this.animate( genFx("show", 3), speed, callback);
3788:¡¡¡¡} else { // °ú¿ô speed ¤¬Ì¤ÄêµÁ¤« null Ãͤλþ¡¢¥¤¥ó¥¹¥¿¥ó¥¹¤Î¸Ä¡¹¤ÎÍ×ÁǤËÂФ·¤Æ
3789:¡¡¡¡¡¡for ( var i = 0, l = this.length; i < l; i++ ){
¡¡¡¡¡¡¡¡¡¡¡¡ // olddisplay ¤Ê¤ë̾¾Î¤Ç³ÆÍ×ÁǥΡ¼¥É¤Ë´ØÏ¢ÉÕ¤±¤é¤ì¤Æ¤¤¤ëÃͤò¼è¤ê½Ð¤¹¡£
¡¡¡¡¡¡¡¡¡¡¡¡ // ´ØÏ¢¤Å¤±¤é¤ì¤¿Ãͤ¬¤Ê¤¤¾ì¹ç¤Ë¤Ï old = false ¤È¤Ê¤ë¡£
¡¡¡¡¡¡¡¡¡¡¡¡ // Åö³ºÍ×ÁǥΡ¼¥É¤ËÂФ¹¤ë½é¤á¤Æ¤Î show() ŬÍÑ»þ¤Ë¤Ï old ¤Ï false ¤È
¡¡¡¡¡¡¡¡¡¡¡¡ // ¤Ê¤ë¤¬¡¢ÆóÅÙÌܰʹߤθƤӽФ·»þ¤Ë¤Ï 3811 ¹Ô¤Ç´ØÏ¢¤Å¤±¤¬ÄêµÁºÑ¤ß¤Ê¤Î¤Ç
¡¡¡¡¡¡¡¡¡¡¡¡ // old = "block" ¤È¤Ê¤ë¡£
3790:¡¡¡¡¡¡¡¡var old = jQuery.data(this[i], "olddisplay");
3791:¡¡¡¡¡¡¡¡// old ¤¬¤¢¤ì¤Ð³ÆÍ×ÁǥΡ¼¥É¤Î display ¥¹¥¿¥¤¥ëÃÍ¤Ë old ¤ò¡¢
¡¡¡¡¡¡¡¡¡¡¡¡ // old ¤¬ false ¤Ê¤é¤Ð null ¤òÂåÆþ¤¹¤ë¡£
3792:¡¡¡¡¡¡¡¡this[i].style.display = old || "";
3793:¡¡¡¡¡¡¡¡// ³ÆÍ×ÁǥΡ¼¥É¤Î display ¥¹¥¿¥¤¥ëÃͤ¬ "none" ¤Ê¤é¤Ð
3794:¡¡¡¡¡¡¡¡if ( jQuery.css(this[i], "display") === "none" ) {
3795:¡¡¡¡¡¡¡¡¡¡var tagName = this[i].tagName, display; // ¥í¡¼¥«¥ëÊÑ¿ôÄêµÁ
3796:¡¡¡¡¡¡¡¡¡¡// Åö³ºÍ×ÁǥΡ¼¥É¤ËÂФ¹¤ë½é¤á¤Æ¤Î show() ŬÍÑ»þ¤Ë¤Ï
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // elemdisplay[ tagName ] ¥×¥í¥Ñ¥Æ¥£¤Ï¸ºß¤·¤Æ¤¤¤Ê¤¤¤¬¡¢ÆóÅÙÌܰʹߤÎ
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // ¸Æ¤Ó½Ð¤·»þ¤Ë¤Ï 3808 ¹Ô¤ÇÄêµÁºÑ¤ß¤Ê¤Î¤Ç¸ºß¤·¤Æ¤¤¤ë¤³¤È¤Ë¤Ê¤ë¡£
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // elemdisplay ¥ª¥Ö¥¸¥§¥¯¥È¤Ë tagName ¥×¥í¥Ñ¥Æ¥£¤¬¤¢¤ì¤Ð¡¢
3797:¡¡¡¡¡¡¡¡¡¡if ( elemdisplay[ tagName ] ) {
3798:¡¡¡¡¡¡¡¡¡¡¡¡display = elemdisplay[ tagName ]; // display Ãͤò¤½¤ÎÃͤȤ¹¤ë¡£
3799:¡¡¡¡¡¡¡¡¡¡} else { // elemdisplay ¥ª¥Ö¥¸¥§¥¯¥È¤Ë tagName ¥×¥í¥Ñ¥Æ¥£¤¬¤Ê¤±¤ì¤Ð
¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // tagName ¤ÈƱ¤¸Ì¾¾Î¤ÎÍ×ÁǥΡ¼¥É¤òºîÀ®¤·¡¢body Äɲøå¤Ë»²¾È¤ò¼èÆÀ¤¹¤ë¡£
3800:¡¡¡¡¡¡¡¡¡¡¡¡var elem = jQuery("<" + tagName + " />").appendTo("body");
3801:¡¡¡¡¡¡¡¡¡¡¡¡// Äɲä·¤¿¥Î¡¼¥É¤Î display °À¤ò¼èÆÀ¤¹¤ë¡£
3802:¡¡¡¡¡¡¡¡¡¡¡¡display = elem.css("display");
3803:¡¡¡¡¡¡¡¡¡¡¡¡if ( display === "none" ) // ¤â¤·¤â¤½¤ÎÃͤ¬ "none" ¤Ê¤é¤Ð
3804:¡¡¡¡¡¡¡¡¡¡¡¡¡¡display = "block"; // "block" ¤ËÊѹ¹¤¹¤ë¡£
3805:¡¡¡¡¡¡¡¡¡¡¡¡// body ¤ËÄɲä·¤¿¥Î¡¼¥É¤òºï½ü¤·¡¢
3806:¡¡¡¡¡¡¡¡¡¡¡¡elem.remove();
3807:¡¡¡¡¡¡¡¡¡¡¡¡// elemdisplay ¤Î tagName ¥×¥í¥Ñ¥Æ¥£Ãͤò display ¤Ä¤Þ¤ê "block" ¤È¤¹¤ë¡£
3808:¡¡¡¡¡¡¡¡¡¡¡¡elemdisplay[ tagName ] = display;
3809:¡¡¡¡¡¡¡¡¡¡}
3810:¡¡¡¡¡¡¡¡¡¡// ³ÆÍ×ÁǥΡ¼¥É¤Ë olddisplay ̾¤Î display ÃÍ ¤Ä¤Þ¤ê "block" ¤ò´ØÏ¢¤Å¤±¤ë¡£
3811:¡¡¡¡¡¡¡¡¡¡jQuery.data(this[i], "olddisplay", display);
3812:¡¡¡¡¡¡¡¡}
3813:¡¡¡¡¡¡}
3814:
3815:¡¡¡¡¡¡// Set the display of the elements in a second loop
3816:¡¡¡¡¡¡// to avoid the constant reflow
3817:¡¡¡¡¡¡for ( var i = 0, l = this.length; i < l; i++ ){
¡¡¡¡¡¡¡¡¡¡¡¡ // ³ÆÍ×ÁǥΡ¼¥É¤Î display ¥¹¥¿¥¤¥ë°À¤ò olddisplay ̾¤Ç´ØÏ¢¤Å¤±¤é
¡¡¡¡¡¡¡¡¡¡¡¡ // ¤ì¤Æ¤¤¤ëÃÍ¡Ê"block"¡Ë¡¢Ëô¤Ï null ¤ËÀßÄꤹ¤ë¡£
3818:¡¡¡¡¡¡¡¡this[i].style.display = jQuery.data(this[i], "olddisplay") || "";
3819:¡¡¡¡¡¡}
3820:
3821:¡¡¡¡¡¡return this; // ¥¤¥ó¥¹¥¿¥ó¥¹¤òÊÖ¤¹¡£
3822:¡¡¡¡}
3823:¡¡},
°ú¿ô¡§·Ñ³»þ´Ö¡¢callback´Ø¿ô
ÊÖÃÍ¡§jQuery¥¤¥ó¥¹¥¿¥ó¥¹
µ¡Ç½¡§¸À¤¦¤Þ¤Ç¤â¤Ê¤¯ jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Ë°¤¹¤ëÍ×ÁǤò±£Ê䵤»¤ë¥á¥½¥Ã¥É¤Ç¤¹¡£
¤³¤Î¥á¥½¥Ã¥É¤Ë¤ª¤¤¤Æ¤â°ú¿ô¤¬Í¿¤¨¤é¤ì¤¿¾ì¹ç¤Ë¤Ï¡¢animate ¥á¥½¥Ã¥É¤¬ÍøÍѤµ¤ì¤Þ¤¹¤¬¤³¤³¤Ç¤Ï¿¨¤ì¤Þ¤»¤ó¡£°ú¿ô¤¬¤Ê¤¤¾ì¹ç¤Î¤ß²òÆÉ¤·¤Þ¤¹¡£
¥¤¥ó¥¹¥¿¥ó¥¹¤Î¸Ä¡¹¤ÎÍ×ÁǤËÂФ·¤Æ¡¢ºÇ½é¤Ë hide ¥á¥½¥Ã¥É¤¬Å¬ÍѤµ¤ì¤¿¾ì¹ç¤Ë¤ª¤¤¤Æ¡¢´û¤ËÅö³ºÍ×ÁÇ¤Ë show ¥á¥½¥Ã¥É¤¬Å¬ÍѤµ¤ì¤Æ¤¤¤ì¤Ð¡¢Åö³ºÍ×ÁÇ¤Ë olddisplay ̾¤Ç´ØÏ¢¤Å¤±¤é¤ì¤¿¾ðÊó¤Ï block ¤ä inline ¤È¤Ê¤Ã¤Æ¤ª¤ê¡¢°ìÅÙ¤â show ¥á¥½¥Ã¥É¤¬Å¬ÍѤµ¤ì¤Æ¤¤¤Ê¤±¤ì¤Ð¡¢Åö³ºÍ×ÁÇ¤Ë olddisplay ̾¤Ç´ØÏ¢¤Å¤±¤é¤ì¤¿¾ðÊó¤Ï¸ºß¤·¤Þ¤»¤ó¡£
¤Ä¤Þ¤ê¡¢#3830 ¤ÎÊÑ¿ô old ¤Ë¤Ï¡¢block¡¢inline ¤Ê¤É¤Î¥¹¥¿¥¤¥ëÃͤ«¡¢Ëô¤Ï undefined ¤¬ÂåÆþ¤µ¤ì¤Þ¤¹¡£¤½¤·¤Æ old ¤¬ undefined Ãͤξì¹ç¡¢!old==true ¤È¤Ê¤ê¡¢ÌÞÏÀ old!=="none" ¤¬À®Î©¤·¤Þ¤¹¡£
¤³¤¦¤·¤Æ»öÁ°¤Ë show ¥á¥½¥Ã¥É¤¬Å¬ÍѤµ¤ì¤Æ¤¤¤Ê¤¤Í×ÁǤËÂФ·¤Æ¡¢½é¤á¤Æ hide ¥á¥½¥Ã¥É¤òŬÍѤ·¤¿»þ¤Ë¤Ï¡¢#3832 ¤¬¼Â¹Ô¤µ¤ì¡¢data ¥á¥½¥Ã¥É¤È css ¥á¥½¥Ã¥É¤Ë¤è¤ê¡¢Åö³ºÍ×ÁǤΠstyle.display ÃÍ¡¢¤Þ¤¿¤Ï»»½Ð¡Ê¥«¥ì¥ó¥È¡Ëdisplay Ãͤ¬¡¢olddisplay ̾¤ÇÅö³ºÍ×ÁǤ˴ØÏ¢¤Å¤±¤é¤ì¤Þ¤¹¡£
¡Ê´ØÏ¢¤Å¤±¤é¤ì¤ëÃÍ¤Ï block¡¢inlineblock¡¢inline Åù¤È¤Ê¤ê¤Þ¤¹¤¬¡¢if ¾ò·ï¤«¤é none ¤À¤±¤Ï¤¢¤êÆÀ¤Þ¤»¤ó¡£olddisplay ÃÍ¤Ï block ¤ä inline ¤Ê¤É¤Îɽ¼¨ÍѤÎÃͤȤʤꡢnone ¤È¤Ê¤ë¤³¤È¤Ï·è¤·¤Æ¤¢¤ê¤Þ¤»¤ó¡£¡Ë
¾Êý¡¢show ¥á¥½¥Ã¥É¤¬Å¬ÍѤµ¤ì¤¿¸å¤Ë hide ¥á¥½¥Ã¥É¤òŬÍѤ·¤¿¾ì¹ç¤ä¡¢Æ±°ìÍ×ÁǤËÂФ·¤ÆÆóÅÙÌܰʹߤΠhide ¥á¥½¥Ã¥É¤òŬÍѤ·¤¿¾ì¹ç¤Ë¤Ï¡¢old ¤Ï̤ÄêµÁ¤Ç¤Ï¤Ê¤¯¤Ê¤Ã¤Æ¤¤¤Þ¤¹¤«¤é !old¡áfalse ¤È¤Ê¤ê¡¢#3831¡Á3832 ¤Ï¼Â¹Ô¤µ¤ì¤Ê¤¤¤Þ¤Þ¡¢#3837¡Á3838 ¤¬¼Â¹Ô¤µ¤ìÅö³ºÍ×ÁǤÏÈóɽ¼¨¡¢¤¢¤ë¤¤¤ÏÈóɽ¼¨¤Î¥Þ¥Þ¤È¤Ê¤ê¤Þ¤¹¡£
olddisplay ÃÍ¤Ï block ¤ä inline Åù¤È¤Ê¤Ã¤Æ¤¤¤ë¤Î¤Ç¡¢3792 ¹Ô¤Ë¤è¤ê display ÃͤϤ½¤Î¤Þ¤Þ¤È¤Ê¤ê¤Þ¤¹¡£¤è¤Ã¤Æ #3794-3812 ¤ÏÄ̲ᤷ¡¢3818 ¹Ô¤¬¼Â¹Ô¤µ¤ì¤ÆÅö³ºÍ×ÁǤ¬É½¼¨¤µ¤ì¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
¢£$().hide ¥á¥½¥Ã¥É¥³¡¼¥É²òÆÉ
3825:¡¡hide: function(speed,callback){
3826:¡¡¡¡if ( speed ) { // speed ¤¬¤¢¤ì¤Ð animate ¥á¥½¥Ã¥É¤ò¼Â¹Ô¤¹¤ë¡£
3827:¡¡¡¡¡¡return this.animate( genFx("hide", 3), speed, callback);
3828:¡¡¡¡} else { // speed ¤¬¤Ê¤¤¤« null ¤Î»þ
3829:¡¡¡¡¡¡for ( var i = 0, l = this.length; i < l; i++ ){
¡¡¡¡¡¡¡¡¡¡¡¡ // ³ÆÍ×ÁÇ¤Ë olddisplay ̾¤Ç´ØÏ¢¤Å¤±¤é¤ì¤Æ¤¤¤ë¥Ç¡¼¥¿¤òÊÑ¿ô old ¤ËÂåÆþ¤¹¤ë
3830:¡¡¡¡¡¡¡¡var old = jQuery.data(this[i], "olddisplay");
3831:¡¡¡¡¡¡¡¡if ( !old && old !== "none" ) // old ¤¬ false ¤« "none"¤Ç¤Ê¤¤»þ¤Ë¤Ï
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // ³ÆÍ×ÁǥΡ¼¥É¤Î display ¥¹¥¿¥¤¥ëÃͤò
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // olddisplay ̾¤Ç³ÆÍ×ÁǥΡ¼¥É¤Ë´ØÏ¢¤Å¤±¤ë¡£
3832:¡¡¡¡¡¡¡¡¡¡jQuery.data(this[i], "olddisplay", jQuery.css(this[i], "display"));
3833:¡¡¡¡¡¡}
3834:
3835:¡¡¡¡¡¡// Set the display of the elements in a second loop
3836:¡¡¡¡¡¡// to avoid the constant reflow
3837:¡¡¡¡¡¡for ( var i = 0, l = this.length; i < l; i++ ){
3838:¡¡¡¡¡¡¡¡this[i].style.display = "none"; // Èóɽ¼¨¤òÀßÄꤹ¤ë¡£
3839:¡¡¡¡¡¡}
3840:
3841:¡¡¡¡¡¡return this; // ¥¤¥ó¥¹¥¿¥ó¥¹¤òÊÖ¤¹¡£
3842:¡¡¡¡}
3843:¡¡},
3844:
°ú¿ô¡§fn,fn2
ÊÖÃÍ¡§jQuery¥¤¥ó¥¹¥¿¥ó¥¹
µ¡Ç½¡§jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Ë°¤¹¤ëÍ×ÁǤòɽ¼¨/±£Ê䵤»¤ë½Û´Ä¥á¥½¥Ã¥É¤Ç¤¹¡£
toggle ¥á¥½¥Ã¥É¤Ï¥¤¥Ù¥ó¥È½èÍý¤Ë¤âÅо줷¤Þ¤¹¡£¤½¤ì¤¬ºÇ½é¤Îʬ´ô¡Ê#3851¡Ë¤Î£²¤Ä¤Î°ú¿ô¤¬¶¦¤Ë´Ø¿ô¤Î¾ì¹ç¤Ç¤¹¡£¤³¤Î¾ì¹ç¤Ë¤Ï 3852 ¹Ô¤¬Å¬ÍѤµ¤ì¤Æ¥¤¥Ù¥ó¥È¤Î toggle ½èÍý¤¬¹Ô¤ï¤ì¤Þ¤¹¡£
fn¡¢fn2 ¤¬¶¦¤Ë¸ºß¤·¤Ê¤¤¾ì¹ç¡¢¤¢¤ë¤¤¤Ï¤¤¤º¤ì¤«°ìÊý°Ê¾å¤¬´Ø¿ô¤Ç¤Ê¤¤¾ì¹ç¤¬¡¢¥¢¥Ë¥á¡Ý¥·¥ç¥ó½èÍý¤ÇÍøÍѤ¹¤ë toggle ¥á¥½¥Ã¥É¤Ç¤¹¡£
¥¢¥Ë¥á¤ÇÍøÍѤ¹¤ë toggle ¥á¥½¥Ã¥É¤Ï 2 ¤Ä¤Î¥±¡¼¥¹¤Ëʬ¤«¤ì¤Þ¤¹¡£
Âè 1 ¤Î¥±¡¼¥¹¤Ï¡¢fn¡¢fn2¤¬¶¦¤Ë¸ºß¤·¤Ê¤¤¾ì¹ç¡¢¤¢¤ë¤¤¤ÏÂè1°ú¿ô¤¬¿¿µ¶Ãͤξì¹ç¤Ç¤¹¡£¤³¤Î¤È¤¤Ë¤Ï¥¤¥ó¥¹¥¿¥ó¥¹¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë³ÆÍ×ÁÇËè¤Ë¼¡¤Î¤³¤È¤ò¹Ô¤¤¤Þ¤¹¡£
Âè 2 ¤Î¥±¡¼¥¹¤Ï fn¡¢fn2 ¤Î¤¤¤º¤ì¤«°ìÊý°Ê¾å¤¬´Ø¿ô¤Ç¤Ê¤¤¾ì¹ç¤Ç¡¢¤«¤ÄºÇ½é¤Î°ú¿ô¤¬¿¿µ¶ÃͤǤʤ¤¾ì¹ç¤Ç¤¹¡£¤³¤Î¤È¤¤Ë¤Ï¡¢"toggle" ¤ò¥¢¥Ë¥áÍÑ¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£ÃͤȤ·¡¢fn ¤È fn2 ¤ò½ç¤Ë speed¡¢easing ¤È¤·¤Æ¡¢¥¤¥ó¥¹¥¿¥ó¥¹¤«¤é animate ¥á¥½¥Ã¥É¤òµ¯Æ°¤·¤Þ¤¹¡£¡Ê#3858¡Ë¤³¤Î animate ¥á¥½¥Ã¥É¤Ë¤ª¤¤¤ÆÂè 1 °ú¿ô¤Ç¤¢¤ë¥ª¥Ö¥¸¥§¥¯¥È¤Î¥×¥í¥Ñ¥Æ¥£Ãͤò toggle ¤È¤¹¤ë¾ì¹ç¤Îµóư¤ÏÊÌÅӾܽҤ·¤Þ¤¹¡£
¢£ toggle ¥¤¥ó¥¹¥¿¥ó¥¹¥á¥½¥Ã¥É
3845:¡¡// Save the old toggle function
3846:¡¡_toggle: jQuery.fn.toggle,
3847:
3848:¡¡toggle: function( fn, fn2 ){
3849:¡¡¡¡var bool = typeof fn === "boolean"; // fn ¤¬¿¿µ¶Ãͤ«¤É¤¦¤«¤ò bool ¤ËÂåÆþ
3850:¡¡¡¡// (1)fn ¤â fn2 ¤â´Ø¿ô¤Ê¤é¤Ð_toggle ¥á¥½¥Ã¥É¤ò¼Â¹Ô¤¹¤ë¡£
¡¡¡¡¡¡ ¡¡//¡Ê¤³¤Î¥±¡¼¥¹¤Ï¥¤¥Ù¥ó¥È½èÍý»þ¤ËÅо줹¤ë¡Ë
3851:¡¡¡¡return jQuery.isFunction(fn) && jQuery.isFunction(fn2) ?
3852:¡¡¡¡¡¡this._toggle.apply( this, arguments ) :
¡¡¡¡¡¡¡¡ // (2)°ú¿ô¤¬¤Ê¤¤¾ì¹ç¡¢¤¢¤ë¤¤¤Ïfn ¤« fn2 ¤Î¤¤¤º¤ì¤«£±¤Ä°Ê¾å¤¬´Ø¿ô¤Ç¤Ê¤¤¾ì¹ç¤Ë¤Ï¡¢
¡¡¡¡¡¡¡¡¡¡ // (2-1)°ú¿ô¤¬¤Ê¤¤¤«¡¢¤Þ¤¿¤Ï fn ¤¬ bool¡Ê¿¿µ¶Ã͡ˤʤé¤Ð
3853:¡¡¡¡¡¡fn == null || bool ?
3854:¡¡¡¡¡¡¡¡this.each(function(){ //³Æ¥¤¥ó¥¹¥¿¥ó¥¹Ëè¤Ë
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // bool ¤¬ true ¤Ê¤é¤Ð fn ¤ò¡¢bool ¤¬¤Ê¤¤¾ì¹ç¤ä false ¤Ê¤é¤ÐÅö³ºÍ×ÁǤÎ
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // hidden °ÀÍ̵¡Êtrue or false¡Ë¤òÊÑ¿ô state ¤ËÂåÆþ¤¹¤ë¡£
3855:¡¡¡¡¡¡¡¡¡¡var state = bool ? fn : jQuery(this).is(":hidden");
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // state ¤¬ true ¤Ê¤é¤Ð show ¥á¥½¥Ã¥É¤ò¡¢
¡¡¡¡¡¡¡¡¡¡¡¡¡¡ // state ¤¬ false ¤Ê¤é¤Ð hide ¥á¥½¥Ã¥É¤ò¤½¤ì¤¾¤ìµ¯Æ°¤¹¤ë¡£
3856:¡¡¡¡¡¡¡¡¡¡jQuery(this)[ state ? "show" : "hide" ]();
3857:¡¡¡¡¡¡¡¡}) :
¡¡¡¡¡¡¡¡¡¡ // (2-2)fn ¤¬ null ¤Ç¤â¤Ê¤¯¿¿µ¶ÃͤǤâ¤Ê¤¤¾ì¹çanimate¥á¥½¥Ã¥É¤ò¼Â¹Ô¤¹¤ë¡£
3858:¡¡¡¡¡¡¡¡this.animate(genFx("toggle", 3), fn, fn2);
3859:¡¡},
°ú¿ô¡§speed¡¢to¡¢callback
ÊÖÃÍ¡§jQuery¥¤¥ó¥¹¥¿¥ó¥¹
µ¡Ç½¡§ÉÔÆ©ÌÀÅÙ¤ò to¡¢speed ¤ò duration¡¢callback ¤ò¥¢¥Ë¥á½ªÎ»¸å¤Ë¼Â¹Ô¤µ¤ì¤ë´Ø¿ô¤È¤¹¤ë¡¢animate ¥á¥½¥Ã¥É¤òµ¯Æ°¤·¤Þ¤¹¡£
¢£ fadeTo ¥á¥½¥Ã¥É
3861:¡¡fadeTo: function(speed,to,callback){
3862:¡¡¡¡return this.animate({opacity: to}, speed, callback);
3863:¡¡},
¤³¤ì¤«¤é jquery.js ¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥É¤Ë´Ø¤ï¤ë³Æ¼ï¤Î¥á¥½¥Ã¥É¤ò²òÆÉ¤·¤Æ¤¤¤¤Þ¤¹¡£
ºÇ½é¤Ë¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥É¤Î¿ï½ê¤ËÅо줷¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎÅÐÏ¿/²ò½ü/¼Â¹Ô¤ò¥³¥ó¥È¥í¡¼¥ë¤¹¤ë¥á¥½¥Ã¥É¤ò°·¤¤¤Þ¤¹¡£
¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç²òÆÉ¤¹¤ë¥á¥½¥Ã¥É¤Ï¡¢jQuery.queue¡¢jQuery.dequeue¡¢
jQuery().queue¡¢µÚ¤Ó jQuery().dequeue ¤Î 4 ¤Ä¤Ç¡¢¤³¤Î¥¨¥ó¥È¥ê¥¤¤ÎËöÈø¤Ë 4 ¤Ä¤Î¥á¥½¥Ã¥É¤ÎÁ´¥³¡¼¥É¤È¤½¤Î²òÀâ¤ò·ÇºÜ¤·¤Þ¤·¤¿¡£
°ú¿ô¡§Í×ÁǥΡ¼¥É¡¢¥¿¥¤¥×̾¾Î¡¢data¡Ê°ìÈ̤˴ؿô¡Ë
ÊÖÃÍ¡§ÇÛÎó¡Ê data ¤¬ÇÛÎó¤Ê¤é¤Ð¤½¤Î³ÆÍ×ÁǤòÍ×ÁǤȤ¹¤ëÇÛÎó¡¢data ¤¬ÇÛÎó¤Ç¤Ê¤¤¤Ê¤é¤Ð [data] ¡Ë
µ¡Ç½¡§¥¿¥°Í×ÁÇ¤Ë data ¤òÍ×ÁǤȤ¹¤ëÂÔ¤Á¹ÔÎó¤ò type ̾¤Ç´ØÏ¢¤Å¤±¡¢´ØÏ¢¤Å¤±¤¿ÇÛÎó¤òÊÖ¤·¤Þ¤¹¡£¶ñÂÎŪ¤Ë¤Ï¥¢¥Ë¥á¡¼¥·¥ç¥ó¥á¥½¥Ã¥É¤òÅÐÏ¿¤·¤¿¤ê¡¢ÅÐÏ¿¤òºï½ü¤¹¤ë¤¿¤á¤Ë»ÈÍѤ·¤Þ¤¹¡£
°ú¿ô¤ò»È¤Ã¤ÆÀâÌÀ¤¹¤ì¤Ð¡¢elem Í×ÁÇ¤Ë type + "queue" ̾¤Ç data ¤òÍ×ÁǤȤ¹¤ëÇÛÎó¤ò´ØÏ¢¤Å¤±¡¢¤«¤Ä¤½¤ÎÇÛÎó¤òÊÖ¤·¤Þ¤¹¡£Î㤨¤Ð data ¤¬ animate ¥á¥½¥Ã¥É¤Ê¤É¤Î´Ø¿ô¤Ê¤é¤Ð¡¢Åö³º´Ø¿ô¤òÍ×ÁǤȤ¹¤ëÇÛÎó¤¬ÊÖ¤µ¤ì¤Þ¤¹¡£
¤Ê¤ª¡¢Æ±°ì¤Î elem ¤Ë¡¢Æ±°ì¤Î type ̾¤ÇÊ£¿ô¤Î data¡Ê data ¤ÏƱ°ì¤Ç¤â°Û¤Ê¤Ã¤Æ¤â²Ä¡Ë¤ò´ØÏ¢¤Å¤±¤ë¤³¤È¤â½ÐÍè¤Þ¤¹¤·¡¢Æ±°ì¤Î elem ¤Ë°Û¤Ê¤ë type ̾¤Ç¡¢Æ±°ì¤Þ¤¿¤ÏÊ̤Πdata ¤ò´ØÏ¢¤Å¤±¤ë¤³¤È¤â²Äǽ¤Ç¤¹¡£
¤³¤Î¥á¥½¥Ã¥É¤òÊ£¿ô²óµ¯Æ°¤¹¤ë¤È¡¢¤½¤Î²ó¿ô¸Ä¿ô¤Î data ¤¬ type ̾¤Ç¥¤¥ó¥¹¥¿¥ó¥¹¤Ë´ØÏ¢¤Å¤±¤é¤ì¤Þ¤¹¡£
¤Þ¤¿ data °ú¿ô¤Ê¤·¤Ç¤³¤Î¥á¥½¥Ã¥É¤òµ¯Æ°¤¹¤ë¤È¡¢type ̾¤Ç elem ¤Ë´ØÏ¢¤Å¤±¤é¤ì¤Æ¤¤¤ëÇÛÎ󤬤¢¤ì¤ÐÅö³ºÇÛÎó¡Ê¶õÇÛÎó¤â´Þ¤à¡Ë¤¬ÊÖ¤µ¤ì¤Þ¤¹¡£
°ú¿ô¡§Í×ÁǥΡ¼¥É¡¢¥¿¥¤¥×̾
ÊÖÃÍ¡§¤Ê¤·
µ¡Ç½¡§¥¤¥ó¥¹¥¿¥ó¥¹¤Î³ÆÍ×ÁǤ˴ØÏ¢¤Å¤±¤é¤ì¤Æ¤¤¤ëÂÔ¤Á¹ÔÎ󤫤顢¤½¤ÎÍ×ÁǤò¼è¤ê½Ð¤·¤Æ¼Â¹Ô¤¹¤ë¥á¥½¥Ã¥É¤Ç¡¢¶ñÂÎŪ¤Ë¤Ï¥¢¥Ë¥á¡¼¥·¥ç¥ó¥á¥½¥Ã¥É¤ò¼Â¹Ô¤¹¤ë¤¿¤á¤Ë»ÈÍѤ·¤Þ¤¹¡£
Àµ³Î¤Ë¸À¤¨¤Ð¡¢type ̾¤¬¤Ê¤¤¾ì¹ç¤È¤½¤ì¤¬ fx ¤Î»þ¤Ë¤Ï¡¢ÇÛÎó¤ÎºÇ½é¤ÎÍ×ÁǤòÇÛÎ󤫤éºï½ü¤·¤¿¾å¤Ç¡¢ÇÛÎó¤Î£²ÈÖÌܤÎÍ×ÁǤËÅÐÏ¿¤µ¤ì¤Æ¤¤¤¿´Ø¿ô¤ò¼Â¹Ô¤·¡¢type ̾¤¬ fx ¤Ç¤Ï¤Ê¤¤Ê̤Îʸ»úÎó¤Î»þ¤Ë¤Ï¡¢ºÇ½é¤ÎÍ×ÁǤòÇÛÎ󤫤éºï½ü¤·¤¿¾å¤Ç¡¢ºï½ü¤·¤¿Í×ÁǤò¼Â¹Ô¤·¤Þ¤¹¡£
¤Ê¤ª¡¢´ØÏ¢¤Å¤±¤é¤ì¤Æ¤¤¤ë¥Ç¡¼¥¿¤¬´Ø¿ô¤Ç¤Ê¤¤¾ì¹ç¤Ë¤Ï²¿¤â¤·¤Þ¤»¤ó¡£
Îã¡§
$.queue($("p").get(0),"te",function(){return alert("test")})
$.dequeue($("p").get(0),"te") // type!=="fx" ¤À¤«¤é test ¤¬ alert ¤µ¤ì¤ë¡£
$.queue($("p").get(0),"fx",[function f1(){return alert("test1")},function f2(){return alert("test2")}])
$.dequeue($("p").get(0),"fx") // type=="fx" ¤À¤«¤é test2 ¤¬ alert ¤µ¤ì¤ë¡£
$.queue($("p").get(0),"fx",function f3(){return alert("test3")},function f4(){return alert("test4")})
$.dequeue($("p").get(0),"fx") // test3 ¤¬ alert ¤µ¤ì¤ë¡£¡Ê²¼µ»²¾È¡Ë
/* 2 ÈÖÌܤΠqueue ¥á¥½¥Ã¥É¤Ë¤è¤Ã¤Æ 2 ¤Ä¤Î´Ø¿ô¤¬ºÇ½é¤Î paragraph Í×ÁǤ˴ØÏ¢¤Å¤±¤é¤ì¤ë¤¬¡¢
* 2 ÈÖÌܤΠdequeue ¥á¥½¥Ã¥É¤Ë¤è¤Ã¤Æ¡¢´Ø¿ô f1 ¤ÏÇÛÎ󤫤é½ü¤«¤ì¤ë¡£
* ¤½¤³¤ÇÂè 3 ¤Î queue ¥á¥½¥Ã¥É¤ò¼Â¹Ô¤·¤¿»þÅÀ¤Ë¤ª¤¤¤Æ¡¢ fx ̾¤ÇºÇ½é¤Î paragraph Í×ÁǤË
* ´ØÏ¢¤Å¤±¤é¤ì¤Æ¤¤¤ëÇÛÎó¤ÎÍ×ÁǤϡ¢f2 ´Ø¿ô¤È¡¢f3 ´Ø¿ô¤Î 2 ¤Ä¤È¤Ê¤ë¡£
* ¡Ê 3 ÈÖÌܤΠqueue ¥á¥½¥Ã¥É¤ÎÂè 4 °ú¿ô¤Ï queue ¥á¥½¥Ã¥É¤ÎÄêµÁ¤«¤é̵»ë¤µ¤ì¤ë¡£¡Ë
* ¤½¤Î¸å¤Ë 3 ÈÖÌܤΠdequeue ¥á¥½¥Ã¥É¤ò¼Â¹Ô¤¹¤ë¤È¡¢type =="fx" ¤À¤«¤é ÇÛÎó¤Î 2 ÈÖÌܤÎ
* Í×ÁǤËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë´Ø¿ô f3 ¤ò¼Â¹Ô¤¹¤ë¡£
*/
°ú¿ô¡§¥¿¥¤¥×̾¡¢data¡Ê°ìÈ̤ˤϴؿô¡Ë
ÊÖÃÍ¡§ÇÛÎó¤Þ¤¿¤ÏjQuery¥¤¥ó¥¹¥¿¥ó¥¹
µ¡Ç½¡§Âè 2 °ú¿ô data ¤òÍ¿¤¨¤¿¾ì¹ç¤Ë¤Ï¡¢¥¤¥ó¥¹¥¿¥ó¥¹¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë³ÆÍ×ÁÇËè¤Ë data ¤òÍ×ÁǤȤ¹¤ëÇÛÎó¤ò´ØÏ¢¤Å¤±¡¢°¿¤ë¾ò·ï²¼¤Ç¤Ï´ØÏ¢¤Å¤±¤¿´Ø¿ô¤ò¼Â¹Ô¤·¤Þ¤¹¡£°ìÊý¡¢data ¤òÍ¿¤¨¤Ê¤¤¾ì¹ç¤Ë¤Ï¡¢Í×ÁǤ˴ØÏ¢¤Å¤±¤é¤ì¤¿ÇÛÎ󤬤¢¤ì¤Ð¤½¤ÎÇÛÎó¤òÊÖ¤·¤Þ¤¹¡£
°Ê¾å¤ò°ì¸À¤Ë¤Þ¤È¤á¤ì¤Ð¡¢¡Ödata¤òÇÛÎó¤Ë³ÊǼ¤·¤Æ¤½¤ÎÇÛÎó¤òÍ×ÁǤ˴ØÏ¢¤Å¤±¡¢¾ì¹ç¤Ë¤è¤Ã¤Æ¤ÏÇÛÎó¤òÊÖ¤¹¤«¡¢ÇÛÎóÍ×ÁǤǤ¢¤ë´Ø¿ô¤ò¼Â¹Ô¤¹¤ë¡×¤È¸À¤Ã¤¿¤È¤³¤í¤Ç¤·¤ç¤¦¤«¡£
¶ñÂÎŪ¤Ë¤Ï animate ¥á¥½¥Ã¥ÉÆâ¤Ç jQuery().queue ¥á¥½¥Ã¥É¤¬ÍøÍѤµ¤ì¤Þ¤¹¤¬¡¢¤½¤ÎºÝ¤Î°ú¿ô¤ÏÍ£°ì¤Î´Ø¿ô¤·¤«¤Ê¤¤¤Î¤Ç¡¢Åö³º´Ø¿ô¤¬ data ¤ËÂåÆþ¤µ¤ì¡¢type=="fx" ¤È¤Ê¤ê¤Þ¤¹¡£¤³¤¦¤·¤Æ¡¢¥¤¥ó¥¹¥¿¥ó¥¹¤Î³ÆÍ×ÁǤ˴ØÏ¢¤Å¤±¤é¤ì¤¿Åö³º´Ø¿ô¤¬ 1 ¤Ä¤À¤±¤Î¾ì¹ç¤Ë¤Ï¡¢Åö³º´Ø¿ô¤¬¼Â¹Ô¤µ¤ì¤Þ¤¹¡£
¤Ê¤ª¡¢ÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë´Ø¿ô¤¬´û¤Ë 1 ¤Ä°Ê¾å¤¢¤ë¾ì¹ç¤Ë¤Ï¡¢´Ø¿ô¤Ï¼Â¹Ô¤µ¤ì¤ºÇÛÎóÆâ¤ËÅÐÏ¿¤µ¤ì¤ë¤À¤±¤Ç¤¹¡£
¤Þ¤¿¡¢jquery.js ¤Ë¤Ï¶õÇÛÎó¤À¤±¤ò°ú¿ô¤È¤·¤Æ jQuery().queue ¥á¥½¥Ã¥É¤¬ÍøÍѤµ¤ì¤ë¥·¡¼¥ó¤â¤¢¤ê¤Þ¤¹¡£¤³¤Î¾ì¹ç¤Ë¤Ï¡¢¾åµ 3. ¤«¤é type="fx"¡¢data=[] ¤È¤Ê¤ê¡¢ÂÔ¤Á¹ÔÎó¤ÎÍ×ÁÇ¿ô¤Ï¥¼¥í¤Ç¤¹¤«¤é¡¢²¿¤â¼Â¹Ô¤µ¤ì¤Þ¤»¤ó¡£Ã¢¤·¡¢¤³¤Î¤È¤¤Ë¤Ï¥¿¥°Í×ÁÇ¤Ë fx ̾¤Ç´ØÏ¢¤Å¤±¤é¤ì¤Æ¤¤¤ëÇÛÎó¤Ï¶õÇÛÎó¤È¤Ê¤ê¤Þ¤¹¡£¤Ä¤Þ¤ê¡¢ jQuery().queue([]) ¤ò¼Â¹Ô¤¹¤ë¤ÈÅÐÏ¿¥á¥½¥Ã¥É¤¬ºï½ü¤µ¤ì¤Æ¤Ê¤¯¤Ê¤ê¤Þ¤¹¡£
°ú¿ô¡§type
ÊÖÃÍ¡§¥¤¥ó¥¹¥¿¥ó¥¹¤Î¸Ä¡¹¤ÎÍ×ÁÇËè¤Ë jQuery.dequeue(this,type) ¤ò¼Â¹Ô¤·¤Þ¤¹¡£
µ¡Ç½¡§type ̾¤¬¤Ê¤¤¤«¡¢¤½¤ì¤¬ fx ¤Î»þ¤Ë¤Ï¡¢ÇÛÎó¤ÎºÇ½é¤ÎÍ×ÁǤòºï½ü¤·¤¿¾å¤Ç¡¢¿·¤¿¤ËºÇ½é¤ÎÍ×ÁǤȤʤä¿´Ø¿ô¡Ê¤½¤ì¤Ïºï½üÁ°¤Ë¤ÏÇÛÎó¤Î£²ÈÖÌܤÎÍ×ÁǤËÅÐÏ¿¤µ¤ì¤Æ¤¤¤¿¡Ë¤ò¼Â¹Ô¤·¡¢type ̾¤¬ fx ¤Ç¤Ê¤¤¾ì¹ç¤Ë¤Ï¡¢ºÇ½é¤ÎÍ×ÁǤòÇÛÎ󤫤éºï½ü¤·¤¿¾å¤Ç¡¢¤½¤Î´Ø¿ô¤ò¼Â¹Ô¤·¤Þ¤¹¡£¤Ê¤ª¡¢´ØÏ¢¤Å¤±¤é¤ì¤Æ¤¤¤ë¥Ç¡¼¥¿¤¬´Ø¿ô¤Ç¤Ê¤¤¾ì¹ç¤Ë¤Ï¤³¤Î¥á¥½¥Ã¥É¤Ï²¿¤â¤·¤Þ¤»¤ó¡£
¢£$.queue ¡õ $.dequeue ¥á¥½¥Ã¥É¥³¡¼¥É²òÆÉ
1271:jQuery.extend({ // jQuery ¥ª¥Ö¥¸¥§¥¯¥È¤Î³ÈÄ¥
ޥޥޥޥޥޥޥޥޥޥޥޥޥ
¡¡¡¡¡¡ // ¤³¤ì¤Ï¡¢¥Î¡¼¥É¤Ë data ¤òÍ×ÁǤȤ¹¤ëÇÛÎó¤ò´ØÏ¢¤Å¤±¡¢¡¢¤«¤Ä´ØÏ¢¤Å¤±¤é¤ì¤¿
¡¡¡¡¡¡ // ÇÛÎó¤òÊÖ¤¹¥á¥½¥Ã¥É¤Ç¤¢¤ë¡£data¤Ï´Ø¿ô¤Ç¤¢¤ë¤³¤È¤ò°ÅÌÛ¤ÎÁ°Äó¤È¤·¤Æ¤¤¤ë¤¬¡¢
¡¡¡¡¡¡ // ¤³¤Î¥á¥½¥Ã¥É¤Ç¤Ï¤½¤Î´Ø¿ô¤ò¼Â¹Ô¤¹¤ë¤³¤È¤Ï¤Ê¤¤¡£¤¢¤¯¤Þ¤Ç¤âÅÐÏ¿¤¹¤ë¤À¤±¤Ç¤¢¤ë¡£
1339:¡¡queue: function( elem, type, data ) {
1340:¡¡¡¡if ( elem ){
1341:¡¡
1342:¡¡¡¡¡¡type = (type || "fx") + "queue"; // ex."fxqueue"
1343:¡¡¡¡¡¡// Í×ÁÇ elem ¤Ë type ̾¤Ç´ØÏ¢¤Å¤±¤é¤ì¤¿ÃͤòÊÖ¤¹¡£
1344:¡¡¡¡¡¡var q = jQuery.data( elem, type ); // ÊÖÃͤÏÇÛÎó¤Þ¤¿¤Ï̤ÄêµÁÃͤȤʤ롣
1345:¡¡¡¡¡¡// q ¤¬ ̤ÄêµÁ¤«¡¢¤Þ¤¿¤Ï Âè 3 °ú¿ô data ¤¬ÇÛÎó¤Ê¤é¤Ð
1346:¡¡¡¡¡¡if ( !q || jQuery.isArray(data) )
¡¡¡¡¡¡¡¡¡¡¡¡ // elem ¤Ë type ̾¤Ç jQuery.makeArray(data) ¤ò´ØÏ¢¤Å¤±¤ë
¡¡¡¡¡¡¡¡¡¡¡¡ // q ¤Ë¤Ï jQuery.makeArray(data) ¤¬ÂåÆþ¤µ¤ì¤ë¡£
1347:¡¡¡¡¡¡¡¡q = jQuery.data( elem, type, jQuery.makeArray(data) );
1348:¡¡¡¡¡¡else if( data ) // q ¤¬Â¸ºß¤¹¤ë¤«¡¢ÇÛÎó¤Ç¤Ï¤Ê¤¤Âè 3 °ú¿ô data ¤¬
1349:¡¡¡¡¡¡¡¡q.push( data ); // ¤¢¤ë¾ì¹ç¤Ë¤ÏÇÛÎó q ¤Ë data ¤ò³ÊǼ¤¹¤ë¡£
1350:¡¡¡¡¡¡// °Ê¾å¤Î·ë²Ì q ¤Ïɬ¤ºÇÛÎ󷿤ÎÊÑ¿ô¤È¤Ê¤ë¡£
1351:¡¡¡¡}
1352:¡¡¡¡return q; // elem ¤¬¤¢¤í¤¦¤¬¤Ê¤«¤í¤¦¤¬¡¢ÅÆ¤Ë³Ñ q ¤òÊÖ¤¹¡£
¡¡¡¡¡¡¡¡ // data ¤¬Ì¤ÄêµÁ¤Î»þ¤Ë¤Ï q ¤Ï¶õÇÛÎó¤È¤Ê¤ë¡£
¡¡¡¡¡¡¡¡ // ¤Ê¤ª¡¢elem ¤¬¤Ê¤¤¤È¤¤Ë¤ÏÌÀ¤é¤«¤Ë return q; ¤¬¥¨¥é¡¼¤ò°ú¤µ¯¤³¤¹¡£
¡¡¡¡¡¡¡¡ // ¡ÊError¡§ReferenceError: q is not defined¡Ë
1353:¡¡},
1354:¡¡// $.queue ¤Ë¤è¤ê elem ¤Ë´ØÏ¢¤Å¤±¤é¤ì¤¿ data¡Ê´Ø¿ô¡Ë¤ò¼Â¹Ô¤¹¤ë¥á¥½¥Ã¥É
¡¡¡¡¡¡ // ⤷¡¢type ¤¬ fx ¤Î»þ¤Ê¤É¤Ë¤Ï¡¢£²ÈÖÌܤΠdata ¤ò¼Â¹Ô¤¹¤ë¤³¤È¤Ëα°Õ¡£
1355:¡¡dequeue: function( elem, type ){
1356:¡¡¡¡var queue = jQuery.queue( elem, type ), // queue = [data] or []
1357:¡¡¡¡¡¡¡¡fn = queue.shift(); // queue ¤ÎºÇ½é¤ÎÍ×ÁǤòºï½ü¤·¡¢¤½¤ì¤ò fn ¤ËÊÖ¤¹¡£
1358:¡¡¡¡¡¡¡¡// ºÇ½é¤ÎÍ×ÁǤ¬¤Ê¤¤¾ì¹ç¤Ë¤Ï fn ¤Ï false ¤È¤Ê¤ë¡£
1359:¡¡¡¡if( !type || type === "fx" ) // type ¤¬¤Ê¤¤¤« "fx" ¤Ê¤é¤Ð¡¢
1360:¡¡¡¡¡¡fn = queue[0]; // 1356¹Ô¤ÎÊÑ¿ô queue ¤Î£²ÈÖÌܤÎÍ×ÁÇ
1361:¡¡¡¡¡¡
1362:¡¡¡¡if( fn !== undefined ) // fn ¤¬ÄêµÁ¤µ¤ì¤Æ¤¤¤ì¤Ð fn ¤ò¼Â¹Ô¤¹¤ë¡£
1363:¡¡¡¡¡¡fn.call(elem); // fn ¤¬Ì¤ÄêµÁ¤Ê¤é¤Ð²¿¤â¤·¤Ê¤¤¡£
1364:¡¡}
1365:});
¢£$().queue ¡õ $().dequeue ¥¤¥ó¥¹¥¿¥ó¥¹¥á¥½¥Ã¥É¥³¡¼¥É²òÆÉ
1367:jQuery.fn.extend({ // jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Î¥×¥í¥È¥¿¥¤¥×¤ò³ÈÄ¥¤¹¤ë
ޥޥޥޥޥޥޥޥޥޥޥޥޥ
1392:¡¡queue: function(type, data){ // ¤³¤Î¥á¥½¥Ã¥É¤Ï¾ò·ï¤Ë¤è¤Ã¤Æ¤Ï´Ø¿ô¤ò¼Â¹Ô¤¹¤ë¡£
1393:¡¡¡¡if ( typeof type !== "string" ) { // type ¤¬Ê¸»úÎó¤Ç¤Ê¤¤¤Ê¤é¤Ð
1394:¡¡¡¡¡¡data = type; // type Ãͤò data ¤ËÂåÆþ¤·
1395:¡¡¡¡¡¡type = "fx"; // type Ãͤò "fx" ¤È¤¹¤ë¡£
1396:¡¡¡¡}
1397:¡¡¡¡// (1)data ¤¬Ì¤ÄêµÁ¤Î¾ì¹ç
1398:¡¡¡¡if ( data === undefined )
¡¡¡¡¡¡¡¡¡¡// type ̾¤ÇºÇ½é¤Î¥¤¥ó¥¹¥¿¥ó¥¹¤Ë´ØÏ¢¤Å¤±¤é¤ì¤Æ¤¤¤ëÇÛÎó¤òÊÖ¤¹¡£
¡¡¡¡¡¡¡¡¡¡// ´û¤Ë´ØÏ¢¤Å¤±¤é¤ì¤Æ¤¤¤ëÂÔ¤Á¹ÔÎóÇÛÎ󤬤ʤ¤¾ì¹ç¤Ë¤Ï¶õÇÛÎó¤¬ÊÖ¤µ¤ì¤ë¡£
1399:¡¡¡¡¡¡return jQuery.queue( this[0], type );
1400:¡¡¡¡// (2)data ¤¬ÄêµÁ¤µ¤ì¤Æ¤¤¤ë¾ì¹ç
1401:¡¡¡¡return this.each(function(){ // jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤òÊÖ¤¹¡£
¡¡¡¡¡¡¡¡¡¡ // jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Î¸Ä¡¹¤ÎÍ×ÁÇËè¤ËÂÔ¤Á¹ÔÎóÇÛÎó queue ¤òºîÀ®¤¹¤ë¡£
1402:¡¡¡¡¡¡var queue = jQuery.queue( this, type, data );
1403:¡¡¡¡¡¡// ¤â¤· type ¤¬ fx ¤ÇÇÛÎó queue ¤ÎÍ×ÁÇ¿ô¤¬ 1 ¤Ê¤é¤Ð
1404:¡¡¡¡¡¡if( type == "fx" && queue.length == 1 )
1405:¡¡¡¡¡¡¡¡queue[0].call(this); // ´Ø¿ô queue[0] ¤ò¼Â¹Ô¤¹¤ë¡£
¡¡¡¡¡¡¡¡¡¡ // type ̾¤¬ fx ¤Ç¤Ê¤¤¤«¡¢ÂÔ¤Á¹ÔÎó queue ¤ÎÍ×ÁÇ¿ô¤¬ 0 ¤« 2 °Ê¾å¤Î¾ì¹ç¤Ë¤Ï
¡¡¡¡¡¡¡¡¡¡ // ²¿¤â¤»¤º¤Ë jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤¬ÊÖ¤µ¤ì¤ë¡£
1406:¡¡¡¡});
1407:¡¡},
1408:¡¡dequeue: function(type){
1409:¡¡¡¡return this.each(function(){ // jQuery¥¤¥ó¥¹¥¿¥ó¥¹¤Î¸Ä¡¹¤ÎÍ×ÁÇËè¤Ë
1410:¡¡¡¡¡¡jQuery.dequeue( this, type ); // type ̾¤ÇÅÐÏ¿¤µ¤ì¤Æ¤¤¤ë´Ø¿ô data ¤ò¼Â¹Ô¤¹¤ë¡£
1411:¡¡¡¡});
1412:¡¡}
1413:});
jquery.js ¤Ë¤ª¤±¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥É¤ÎÁ´ÍƲòÌÀ¤Î¤¿¤á¤Ë¡¢¤Þ¤º¤Ï´ðËÜŪ»ö¹à¤«¤éǧ¼±¤ò¿¼¤á¤Æ¤¤¤³¤¦¤È»×¤¤¤Þ¤¹¡£
¥¢¥Ë¥á¡¼¥·¥ç¥ó¤È¤Ï¡¢Â¿¿ô¤ÎÀŻ߲è¤ò½êÄê¤Î»þ´ÖÆâ¤ÇϢ³Ū¤ËÀÚ¤êÂØ¤¨¤Æ¡Öư¤¡×¤ò±é½Ð¤¹¤ë°ìÏ¢¤Îưºî¤Ç¤¹¡£¥¢¥Ê¥í¥°Æ°²è¤Ï Max 30 Ëç/ÉäÎÀŻ߲褫¤é¹½À®¤µ¤ì¡¢0.03 É䴤ȤËÀÚ¤êÂØ¤ï¤ë¤³¤È¤Ë¤è¤êư¤¤ò±é½Ð¤·¤Þ¤¹¤¬¡¢¥¹¥¯¥ê¥×¥È¤Ë¤è¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ç¤âÀŻ߲è¤ÎÀÚ¤êÂØ¤¨¤òϢ³Ū¤Ë¹Ô¤¦¤³¤È¤Ë¤è¤Ã¤ÆÆ°¤¤òɽ¸½¤·¤Þ¤¹¡£
¶ñÂÎŪ¤Ë¤ÏÂоݤȤ¹¤ë¥¿¥°Í×ÁǤΠCSS ¥¹¥¿¥¤¥ë°ÀÃͤò¡¢¥¹¥¯¥ê¥×¥È¤«¤éÄê´üŪ¤ËÊѲ½¤µ¤»¤Æ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¼Â¸½¤·¤Þ¤¹¡£¥³¥ó¥Æ¥ó¥Ä¤ÎÉý¤ä¹â¤µ¤Ê¤É¤Î CSS ¥¹¥¿¥¤¥ëÃͤˡ¢½é´üÃÍ¡¢Äê´üŪÁý¸ºÃ͵ڤӽªÎ»ÃͤΠ3 ¤Ä¤ÎÃͤòÍ¿¤¨¡¢¤½¤ì¤é¤ò»þ´Ö¼´¾å¤Ç½èÍý¤¹¤ë¤³¤È¤Ë¤è¤ê¡Öư¤¡×¤ò±é½Ð¤·¤Þ¤¹¡£
jquery.js ¤Ë¤ª¤¤¤Æ¤³¤Î¤è¤¦¤Ê¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¼Â¸½¤·¤Æ¤¤¤ë¥×¥í¥»¥¹¤Ï°Ê²¼¤Î¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£
¤Þ¤º¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬½ª¤ï¤ë¾õÂ֤Ǥ¢¤ë¡Ö ½ªÎ»ÃÍ ¡×¤ò animate ¥á¥½¥Ã¥É¤ÎÂè 1 °ú¿ô prop ¥ª¥Ö¥¸¥§¥¯¥È¤Ç»ØÄꤷ¤Þ¤¹¡£animete ¥á¥½¥Ã¥É¤Ç¤Ï¾¤Ë°ú¿ô¤È¤·¤Æ¡¢¥¢¥Ë¥á¤ËɬÍפȤʤë easing¡¢duration¡¢Ê¤Ӥ˥¢¥Ë¥á½ªÎ»¸å¤Ëµ¯Æ°¤¹¤ë callback ´Ø¿ô¤ò»ØÄꤷ¡¢·ë¶É¤³¤ì¤é¤Î 4 ¤Ä¤Î°ú¿ô¤Ë¤è¤Ã¤Æ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ë·¸¤ëÁ´¤Æ¤ÎÍ×ÁǤò»ØÄꤷ¤Þ¤¹¡£
¤Ê¤ª¡¢speed ¤ò¥ª¥Ö¥¸¥§¥¯¥È·Á¼°¤Ç»ØÄꤷ¤Æ¡¢Âè 3 ¤ÈÂè 4 °ú¿ô¤ò»ØÄꤷ¤Ê¤¤°ú¿ô»ØÄêÊýË¡¤â¤¢¤ê¡¢¤³¤ÎÊýË¡¤Ë¤è¤Ã¤Æ¤Î¤ß»ØÄê²Äǽ¤ÊÃͤ¬¤¢¤ê¤Þ¤¹¡£queue ¤È step ¥á¥½¥Ã¥É¤Ç¤¹¡£
queue ¤Ï¡¢Æ±°ìÍ×ÁǤÎÂФ¹¤ëÊ£¿ô¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¡¢½ç¼¡µ¯Æ°¤¹¤ë¤«¡¢Ê¹ÔŪ¤Ëµ¯Æ°¤¹¤ë¤«¤ò»ØÄꤹ¤ë¥×¥í¥Ñ¥Æ¥£¤Ç¤¹¡£queue ¤ò»ØÄꤷ¤Ê¤¤¤« true ¤È¤¹¤ì¤Ð½ç¼¡µ¯Æ°¤Ë¡¢false ¤È¤¹¤ì¤ÐʹÔŪµ¯Æ°¤È¤Ê¤ê¤Þ¤¹¡£
step ¤Ï¥¢¥Ë¥á¿Ê¹ÔÃæ¤Ë²¿¤«¤ò¹Ô¤ï¤»¤ë¾ì¹ç¤Ë»ØÄꤹ¤ë¥á¥½¥Ã¥É¤Ç¤¹¡£
¥ª¥Ö¥¸¥§¥¯¥È·Á¼°¤Ç»ØÄꤹ¤ë¾ì¹ç¤Ë¤Ï¡¢duration ¤È easing ¤â¤½¤Î¥ª¥Ö¥¸¥§¥¯¥ÈÆâ¤Î³Æ¥×¥í¥Ñ¥Æ¥£¤È¤·¤Æ»ØÄꤷ¤Þ¤¹¡£
¥¢¥Ë¥á¡Ý¥·¥ç¥ó³«»Ï»þ¤Î¾õÂÖ¡§ ¡Ö ½é´üÃÍ ¡× ¤Ï¡¢´û¤Ë¥Ö¥é¥¦¥¶¤ÇÉÁ²èºÑ¤ß¤ÎÍ×ÁǤξõÂÖ¤«¤é¡¢e.custom ¥á¥½¥Ã¥É¤Ë¤è¤Ã¤Æ¼èÆÀ¤·¤Þ¤¹¡£
¤³¤³¤Ë e ¤Ï jquery.js ÆâÉô¤Ë¤ª¤¤¤Æ¡¢jQuery.fx ¥³¥ó¥¹¥È¥é¥¯¥¿¤«¤éÀ¸À®¤µ¤ì¤ë¥¤¥ó¥¹¥¿¥ó¥¹¤Ç¤¹¡£
¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎÄê´üŪÁý¸ºÃͤϡ¢½é´üÃÍ¡¢½ªÎ»ÃÍ¡¢easing´Ø¿ô¡¢Ê¤Ӥ˳«»Ï»þ¹ï¡¢·Ñ³»þ´ÖµÚ¤Ó¸½ºß»þ¹ï¤Î6¤Ä¤ÎÍ×°ø¤«¤é e.step ¥á¥½¥Ã¥É¤Ë¤è¤êÀßÄꤵ¤ì¤Þ¤¹¡£
¤Ê¤ª¡¢¤³¤Î e.step ¥á¥½¥Ã¥É¤Ï¡¢animate ¥á¥½¥Ã¥É¤ÎÂè 2 °ú¿ô¤ò¥ª¥Ö¥¸¥§¥¯¥È·Á¼°¤Ç»ØÄꤷ¤Æ¡¢¤½¤Î¥×¥í¥Ñ¥Æ¥£¤ÇÄêµÁ¤¹¤ë step ¥á¥½¥Ã¥É¤È¤ÏÊÌʪ¤Ç¤¹¡£
ºÇ¸å¤Ë e.custom ¥á¥½¥Ã¥É¤È¤½¤ÎÃæ¤«¤é¸Æ¤Ó½Ð¤µ¤ì¤ë e.step ¥á¥½¥Ã¥É¤Ë¤è¤Ã¤Æ¡¢É¬ÍפÊÁ´¤Æ¤ÎÃͤò¼èÆÀ¤·½ª¤¨¤Æ¤«¤é¡¢e.update ¥á¥½¥Ã¥É¤Ë¤è¤Ã¤ÆÉÁ²è¤ò¹¹¿·¤·¤Þ¤¹¡£
¤³¤³¤Ë¤ª¤¤¤Æ¡¢°Ê¾å¤Î 2.¡Á4.¡¢¤¹¤Ê¤ï¤Á½é´üÃÍÀßÄ꤫¤éÉÁ²è¹¹¿·¤Þ¤Ç¤Î¥Õ¥í¡¼¤Ï¡¢animate ¥á¥½¥Ã¥É¤òµ¯Æ°¤·¤¿ jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤ÎÅÐÏ¿Í×ÁÇËè¤Ë¡¢¤«¤Ä»ØÄꤷ¤¿ CSS ¥×¥í¥Ñ¥Æ¥£Ëè¤Ë²¿É´²ó¡¢²¿Àé²ó¤È·«¤êÊÖ¤µ¤ì¤Þ¤¹¡£¤³¤ÎÆó½Å¤Î¥¤¥Æ¥ì¡¼¥È¤Ë¤è¤Ã¤Æ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬¼Â¸½¤µ¤ì¤Æ¤¤¤ë¤³¤È¤òÍý²ò¤¹¤ë¤³¤È¤¬¡¢animate ¥á¥½¥Ã¥É¤òÍý²ò¤¹¤ëÂ礤ʥݥ¤¥ó¥È¤Ç¤¹¡£
°ø¤ß¤Ë¤³¤ì¤é¤ÎϢ³¤·¤Æµ¯Æ°¤µ¤ì¤ë°ìÏ¢¤Î¥á¥½¥Ã¥É¤ò¿Þ¼°²½¤¹¤ë¤È°Ê²¼¤Î¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£$().animate(prop,speed,easing,callback){
¡¡$().each(func(){ || $().queue(func(){ //¥¤¥Æ¥ì¡¼¥È¤½¤Î£±¡Ê ÂоÝÍ×ÁÇËè ¡Ë
¡¡¡¡$.each(prop,func(name,val){ //¥¤¥Æ¥ì¡¼¥È¤½¤Î£²¡Ê CSS¥¹¥¿¥¤¥ë¥×¥í¥Ñ¥Æ¥£Ëè ¡Ë
¡¡¡¡¡¡¡¦val ¤¬ toggle || show || hide
¡¡¡¡¡¡¡¡¡¡¡¡ ¡¡¢ª e.toggle || e.show || e.hide ¥á¥½¥Ã¥Éµ¯Æ°
¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¤³¤ì¤é¤Î¥á¥½¥Ã¥ÉÆâ¤ÇºÇ½ªÅª¤Ë e.custom ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤ë
¡¡¡¡¡¡¡¦val ¤¬¤½¤Î¾¤Ê¤é¤Ð¡¡ ¡¡¡¡¡¡ ¢ª e.custom ¥á¥½¥Ã¥É¤¬µ¯Æ°¤µ¤ì¤ë
¡¡¡¡¡¡¡¦e.custom ¡á½é´üÃͤò¼èÆÀ¤·¡¢¥¢¥Ë¥á³«»Ï»þ¹ï¤òµÏ¿¤¹¤ë¡£
¡¡¡¡¡¡¡¡¡¡¢
¡¡¡¡¡¡¡¡¡¦e.step ¡á³«»Ï»þ¹ï¤«¤é¤Î·Ð²á»þ¹ï¡¢¤½¤Î»þÅÀ¤Ë¤ª¤±¤ë CSS ÃͤʤɤòÀßÄꤹ¤ë¡£
¡¡¡¡¡¡¡¡¡¡¡¡¢
¡¡¡¡¡¡¡¡¡¡¡¦e.update ¡á¤½¤Î»þÅÀ¤Î CSS Ãͤ˴ð¤Å¤¤¤ÆÍ×ÁǤòɽ¼¨¤¹¤ë¡£
¡¡¡¡})
¡¡});
};
animate ¤Ï¡¢CSS¥×¥í¥Ñ¥Æ¥£ÃͤòÉÑÈˤËÁàºî¤·¡¢ÊѲ½¤µ¤»¤ë¥á¥½¥Ã¥É¤Ç¤¹¡£¤½¤ì¤é¤Î¥×¥í¥Ñ¥Æ¥£Ãͤò´Þ¤à¥ª¥Ö¥¸¥§¥¯¥È¤Ï animete ¥á¥½¥Ã¥ÉÆâ¤ÇÊ£¿ô¸ÄÅо줷¤Þ¤¹¤¬¡¢ºÇ½ªÅª¤Ë¤Ï e ¥¤¥ó¥¹¥¿¥ó¥¹¤Î¥×¥í¥Ñ¥Æ¥£¤ËÅý¹ç¤µ¤ì¤Þ¤¹¡£
¤Ç¤¹¤«¤é¡¢animete¥á¥½¥Ã¥É¤òÍý²ò¤¹¤ë¤Ë¤Ï¡¢¥ª¥Ö¥¸¥§¥¯¥È¤È¤½¤Î¥×¥í¥Ñ¥Æ¥£¤Î¤½¤ì¤¾¤ì¤ÎÌò³ä¤òÃΤ뤳¤È¤¬½ÅÍפˤʤê¤Þ¤¹¡£
°Ê²¼¤Ë¡¢animate ¥á¥½¥Ã¥É¤ËÅо줹¤ë e ¥¤¥ó¥¹¥¿¥ó¥¹¤Î¥×¥í¥Ñ¥Æ¥£¤È¥á¥½¥Ã¥É¡¢ÊÂ¤Ó¤Ë jQuery.fx ¤Î¥¯¥é¥¹¥×¥í¥Ñ¥Æ¥£¤ò¡¢´Êά²½¤·¤¿ÆÈ¼«¤Îɽ¼¨·Á¼°¤Ç¡¢ºÇ¾®¸Â¤ÎÀâÌÀ¤ò²Ã¤¨¤ÆÍåÎ󤷤Ƥª¤¤Þ¤¹¡£
¤½¤ì¤¾¤ì¤Î¥×¥í¥Ñ¥Æ¥£¤ÎÌò³ä¤Ë¤Ä¤¤¤Æ¤Ï¡¢³Æ¥á¥½¥Ã¥É¤Î²òÆÉ¤ÎÃæ¤Ç¹Ô¤¤¤Þ¤¹¡£
¢£ e ¥¤¥ó¥¹¥¿¥ó¥¹ ( ¥³¥ó¥¹¥È¥é¥¯¥¿¤Ï jQuery.fx )
e = {
¡¡elem¡§elem,// jQuery.fx ¤ÎÂè 1 °ú¿ô¤Ç¡¢animete ¥á¥½¥Ã¥É¤Îµ¯Æ°¸µ¤È¤Ê¤ë
¡¡¡¡¡¡¡¡¡¡¡¡ // jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤ËÅÐÏ¿¤µ¤ì¤Æ¤¤¤ëÍ×ÁÇ
¡¡prop:propName, // jQuery.fx ¤ÎÂè 3 °ú¿ô
¡¡options: {
¡¡¡¡queue:false || true, step:function(){¡¦¡¦¡¦}, // ¤³¤ì¤é¤Ï¥æ¡¼¥¶¡¼¤¬»ØÄꤹ¤ë¡£
¡¡¡¡old,complete,easing,duration,display,overflow,// animate ¥á¥½¥Ã¥É¤«¤é°ú¤·Ñ¤¬¤ì¤ë¡£
¡¡¡¡curAnim, // animate ¥á¥½¥Ã¥É¤ÎÂè°ì°ú¿ô¤Ç¤¢¤ë prop ¥ª¥Ö¥¸¥§¥¯¥È¤¬³ÊǼ¤µ¤ì¤ë¡£
¡¡¡¡orig:{prop}, //Ʊ¾å¤Ç¤¢¤ë¤¬Ìò³ä¤¬°Û¤Ê¤ë¡£
¡¡¡¡show:true || false || undefined, hide:true || false || undefined
¡¡},
¡¡startTime, start, end, unit, now, pos, state,
¡¡// ¥á¥½¥Ã¥É
¡¡cur(), custuom(), step(), update(), show(), hide()
}
¢£ jQuery.fx ¥³¥ó¥¹¥È¥é¥¯¥¿¤Î¥¯¥é¥¹¥×¥í¥Ñ¥Æ¥£
jQuery.fx.speeds = {"slow":600, "fast":200, _default:400}
jQuery.fx.step = {opacity:fn(e), _default:fn(e)}
¼«ºî plug-in¡§animatedPopup ¤ÏÅö½é¤ÎÌÜŪ¤ò㤷¤¿¤¬¡¢µ¡Ç½Åª¤Ë¤Ï¶Ë¤á¤Æ¸ÂÄêŪ¤ÇÃÕÀۤǤ¢¤Ã¤¿¡£
¤â¤Ã¤ÈÈÆÍÑŪ¤Ê±¿ÍѤ¬²Äǽ¤È¤Ê¤ë¤è¤¦¤ÊÀ߷פˤ·¤Ê¤±¤ì¤Ð¼«¤é»ÈÍѤ¹¤ë¾å¤Ç¤â¡¢»È¤¤¤Ë¤¯¤¹¤®¤ë¡£
¤½¤³¤Ç jquery.js ¡¢cycle.js¡¢wtooltip.js ¤Î£³¤Ä¤Î¥³¡¼¥É¤È¤Îâˤá¤Ã¤³¤ò¥´¡¼¥ë¥Ç¥ó¥¦¥£¡¼¥¯Á°¤«¤é³«»Ï¤·¤¿¡£
jquery ¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òº¬Ëܤ«¤éÍý²ò¤·¿Ô¤¯¤·¡¢¤½¤ì¤òƧ¤Þ¤¨¤Æ cycle.js ¤ä wtooltip.js ¤âÍý²ò¤·¤Æ¡¢jquery.js ¤òÍøÍѤ·¤¿¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎÁ´ÍƤòÇİ®¤·¤è¤¦¤È¤·¤¿¤Î¤Ç¤¢¤ë¡£
¤½¤Î¥Á¥ã¥ì¥ó¥¸¤ò³«»Ï¤·¤Æ¤«¤é´û¤ËÆó¥ö·î;¤ê¤¬·Ð²á¤·¤¿¤¬¡¢Ì¤¤À¤ËÁ´ÍƲòÌÀ¤Þ¤Ç¤Ë¤Ï»ê¤Ã¤Æ¤¤¤¿¤¤¡£
¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ë·¸¤ë¾å¤Î£²¤Ä¤Î¥³¡¼¥É¤Ï¶Ë¤á¤ÆÆñ²ò¤Ç¤¢¤ë¡£²¿¤ò¤É¤¦½èÍý¤·¤Æ¤¤¤ë¤Î¤«¡¢¤½¤ì¤µ¤¨Íý²ò¤¹¤ë¤Î¤ËÈó¾ï¤Ë¶ìÏ«¤·¤Æ¤¤¿¡£
¥¢¥Ë¥á¤Î´ðËܹ½Â¤¤Ï CSS ½èÍý¤Ç¤¢¤ê¡¢ÂоݤȤʤë HTML Í×ÁǤËÂФ·¤Æ¡¢½é´üÃÍ¡¢½ªÎ»ÃÍ¡¢¤½¤·¤Æ½é´üÃͤ«¤é½ªÎ»ÃͤޤǤÎÊÑÆ°½èÍý¡¢¤³¤ì¤é¤Î£³¤Ä¤ÎCSSÃͤòÁàºî¤¹¤ì¤Ð¤è¤¤¡£¨¡¨¡¨¡¤È¤¤¤¦Ê¬¤«¤ê¤¤Ã¤¿¤³¤È¤ÏÅöÁ³Íý²ò¤·¤Æ¤¤¤ë¤Ä¤â¤ê¤À¤Ã¤¿¡£
¤·¤«¤·¡¢¥³¥È¤Ï¤½¤¦Ã±½ã¤Ç¤Ï¤Ê¤«¤Ã¤¿¤Î¤Ç¤¢¤ë¡£
Î㤨¤Ð¡¢Í×ÁǤΰÌÃÖ¤äÂ礤µÊÂ¤Ó¤ËÆ©ÌÀÅ٤ʤɤΠHTML ʸ½ñ¤Ë¤ª¤±¤ë»ØÄê¤Ï¡¢img ¥¿¥°¤Ç°ìÈÌŪ¤Ê¤è¤¦¤ËÅö³º¥¿¥°¤Î¥¿¥°Â°À¤È¤·¤ÆÀßÄꤹ¤ë¤³¤È¤â¤¢¤ì¤Ð¡¢CSS ¥¹¥¿¥¤¥ë¥·¡¼¥È¤Ç»ØÄꤹ¤ë¾ì¹ç¤â¤¢¤ë¡£¤Þ¤¿ Javascript ¤Ç»ØÄꤹ¤ë¤³¤È¤â¤¢¤ë¡£¤³¤ì¤é¤ÎÁ´¤Æ¤Î¥±¡¼¥¹¤òÁ°Äó¤È¤·¤¿¥³¡¼¥É¤Ç¤Ê¤±¤ì¤Ð¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ï¼«ºß¤ËÁà¤ë¤³¤È¤¬½ÐÍè¤Ê¤¤¤ï¤±¤Ç¡¢¤Þ¤º¤½¤Î¤³¤È¤ò´Î¤ËÌ两ëɬÍפ¬¤¢¤Ã¤¿¡£Í¾¤ê¤ËÅö¤¿¤êÁ°¤È¤Ê¤Ã¤Æ¤¤¤¿¡Ö¥Ö¥é¥¦¥¶¤Ë¤è¤ëÉÁ²è¤Î»ÅÁȤߡפò²þ¤á¤ÆºÆÇ§¼±¤µ¤»¤é¤ì¤¿¤Î¤Ç¤¢¤ë¡£
¤Þ¤¿¡¢jQuery.data() ¥á¥½¥Ã¥ÉÅù¤Ë¤è¤ë DOM ¥Î¡¼¥É¤Ø¤Î¾ðÊó¤Î´ØÏ¢¤Å¤±¤¬ jquery.js ¥¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥É¤Î½ÅÍפÊÉôʬ¤ò¹½À®¤·¤Æ¤¤¤ë¤¬¡¢¤³¤ì¤ò¤¤Á¤ó¤ÈÍý²ò¤·¤¤ë¤³¤È¤âɬÍפÀ¤Ã¤¿¡£
¹¹¤Ë¸À¤¨¤Ð¡¢jQuery().queue() ¥á¥½¥Ã¥É¤Ê¤É¤Ë¤è¤ê¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òÅÐÏ¿¤¹¤ë¤È¤¤¤¦»ÅÁȤߤòÍý²ò¤·¤Ê¤±¤ì¤Ð¡¢¼«ºß¤Ë¥¢¥Ë¥á¤òÁà¤ë¤³¤È¤â½ÐÍè¤Ê¤¤¡£¨¡¨¡¨¡¤È¤¤¤¦¤³¤È¤òÍý²ò¤·¤¤ëɬÍפ⤢¤Ã¤¿¡£
¸½ºß¡¢Á´ÍƲòÌÀ¤Ë¤Ï̤¤À»ê¤Ã¤Æ¤¤¤Ê¤¤¤â¤Î¤Î¡¢¤ª¤½¤é¤¯90¡ó¤ÏÍý²ò¤Ç¤¤¿¤È»×¤¨¤ë¤È¤³¤íËøÅþ㤷¤Æ¤¤¤ë¡£¤â¤¦¾¯¤·¤ÎʳƮ¤Ç¡Ö¤½¤Î»³¤òÅФêÀڤ뤳¤È¡×¤¬½ÐÍè¤ë¤Ç¤¢¤í¤¦¨¡¨¡¨¡¤È»×¤¨¤ëÃʳ¬¤Þ¤Ç¤ä¤Ã¤ÈÅþ㤷¤¿¡£
º£°ìÊâʳƮ¤·¤è¤¦¡¢¤È»×¤Ã¤Æ¤¤¤ë¡£
´û¤Ë¸ÀµÚ¤·¤¿ Easing Plugin ¤Î¾¤ËÃøÌ¾¤Ê¤â¤Î¤È¤¤¤¨¤Ð Cycle ¤À¤í¤¦¡£
¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç¤Ï¸å¼Ô¤Ë¤Ä¤¤¤Æ¸ÀµÚ¤·¤¿¤¤¡£
Cycle ¤Ï¤½¤Î¶Ú¤Ç¤Ï¡Ê¶ì¾Ð¡ËÁêÅöÃøÌ¾¤Ê¥×¥é¥°¥¤¥ó¤À¤í¤¦¡£
¤½¤ì¤ÏϢ³¤·¤Æ²èÁü¤òɽ¼¨¤¹¤ë³Æ¼ï¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òÄ󶡤¹¤ë¡£¤·¤«¤â¤½¤Î¥µ¥¤¥È¤Ç¤ÏÍÍ¡¹¤Ê¥Ç¥â¤ò¶ñÂÎŪ¤Ë·Ç¼¨¤·¤Æ¤ª¤ê¡¢ ´ØÏ¢¥µ¥¤¥È ¤Ç¤ÏÍÍ¡¹¤Ê¿·¤¿¤Ê¸ú²Ì¤òŬÍѤ·¤¿¥Ç¥â¤ò¸«¤ë¤³¤È¤¬½ÐÍè¤ë¡£
Cycle ¥×¥é¥°¥¤¥ó¤Ï¡Ö²èÁü¤¬¥µ¥¤¥¯¥ë¤¹¤ë¡×¤³¤È¤«¤é¾ÝħŪ¤Ê¥Í¡¼¥ß¥ó¥°¤È¤Ê¤Ã¤¿¤È»×¤ï¤ì¤ë¤¬¡¢¤½¤Î¥³¡¼¥É¤ò²òÆÉ¤¹¤ë¤³¤È¤Ï¡¢jquery.js ¤ò»ÈÍѤ·¤¿¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î³Ø½¬¤Ë¤È¤Ã¤Æ¶Ë¤á¤ÆÍ±×¤Ç¤¢¤ë¡£
¤µ¤Æ¡¢¤½¤Î¥³¡¼¥É¤ÏÁ²¼¡²þÄû¤µ¤ì¤Æ¤ª¤ê¡¢ÅöÁ³¤Î¤³¤È¤Ê¤¬¤é²þÄû¤ÎÅÔÅÙ¹Ô¿ô¤¬Áý¤¨¤Æ¤¤¤ë¡£ºÇ¿·¤Î ver 2.65¡Ê2009/4/7¡Ë¤Ï¼Â¤ËÀé¹Ô¤òͤ¨¤ë¥³¡¼¥É¤È¤Ê¤Ã¤Æ¤¤¤ë¤¬¡¢ver 2.09¡Ê2008/01/22¡Ë ¤Ç¤Ï 535 ¹Ô¤À¤Ã¤¿¤«¤é 1 ǯ;¤ê¤ÇÇܤÎŤµ¤È¤Ê¤Ã¤¿¡£¤³¤ì¤Ï jquery.js ¤Î 1.3x ·ÏÅоì¤òƧ¤Þ¤¨¤¿²þÄû¤âÀ¹¤ê¹þ¤Þ¤ì¤Æ¤¤¤ë¤·¡¢ÍÍ¡¹¤Ê·Á¼°¤Î°ú¿ô¤Ø¤ÎÂнè¤òÀ¹¤ê¹þ¤ó¤À¤³¤È¤Ê¤É¤âÁý¹Ô¤ÎÍýͳ¤À¤í¤¦¡£
¤¤¤º¤ì¤Ë¤·¤Æ¤â¡¢¤³¤Î Cycle ¥×¥é¥°¥¤¥ó ¤¬¥¢¥Ë¥á¡¼¥·¥ç¥ó¥×¥é¥°¥¤¥óºîÀ®¤Î¶µ²Ê½ñ¤È¤Ê¤ë¤³¤È¤Ï´Ö°ã¤¤¤Ê¤¤¡ª
Cycle ¥³¡¼¥É¤ò¶ãÌ£¤·¤Æ¤ß¤ë¤È¡¢¤½¤ì¤Ï¶Ë¤á¤ÆÆÃħŪ¤Ê¹½Â¤¤È¤Ê¤Ã¤Æ¤¤¤ë¡£
¤¹¤Ê¤ï¤Á¡¢Animation ¤Î¤¿¤á¤Î CSS ÀßÄê¤Ë¤ª¤¤¤Æ¡¢(1) ¤Þ¤º¡¢¥Ç¥Õ¥©¥ë¥ÈÃͤò¥ª¥Ö¥¸¥§¥¯¥È·Á¼°¤ÇÀßÄꤷ¤Æ¤ª¤¡¢(2) ¼¡¤Ë¤½¤ì¤Ë¥á¥½¥Ã¥É¤Î°ú¿ô¤ò¾å½ñ¤¤·¡¢(3) ¹¹¤Ë¤½¤ì¤ò²Ã¹©¤·¤Æ¡¢¥¢¥Ë¥áÁ°¡¢¥¢¥Ë¥áÍÑ¡¢¥¢¥Ë¥á¸å¤Î¤½¤ì¤¾¤ì¤Î CSS ÀßÄê¤òºîÀ®¤¹¤ë¨¡¨¡¨¡¤È¤¤¤¦Ãʼè¤ê¤ò¥¢¥Ë¥á¡¼¥·¥ç¥óµ¯Æ°¤ÎÁ°¤Ë¹Ô¤Ã¤Æ¤¤¤ë¤³¤È¤Ç¤¢¤ë¡£
¤³¤¦¤·¤¿¡ÖºîË¡¡×¤Ï¥Ä¡¼¥ë¥Á¥Ã¥× plug-in ¤Ë¤ª¤¤¤Æ¿Íµ¤¤Î¹â¤¤ wtooltip.js plug-in ¤Ç¤âÁ´ÌÌŪ¤ËºÎÍѤµ¤ì¤Æ¤ª¤ê¡¢Àµ³Î¤Ë¸À¤¨¤Ð¤³¤Î plug-in ¤Ï Cycle plug-in ¤ÎºîË¡¤òƧ½±¤·¤¿¤È¸À¤¦¤³¤È¤¬½ÐÍè¤ë¤À¤í¤¦¡£
ËݤäƲæÎ® plug-in ¡§ animatedPopup ¤ò¸Ü¤ß¤ì¤Ð¡¢¤½¤Î¤è¤¦¤Ê¡Ö¹½Â¤Åª¤Ê¡×ºîË¡¤ÏºÎÍѤ·¤Ê¤«¤Ã¤¿¡£¤½¤·¤Æ¤½¤Î¤³¤È¤¬plug-in¤Îµ¡Ç½³ÈÄ¥¤Ë¤ª¤¤¤Æ¾ã³²¤Ë¤â¤Ê¤Ã¤Æ¤¤¤ë¡£
¤½¤³¤Ç¡¢Cycle.js ¤ä wtooltip.js ¤ÇºÎÍѤµ¤ì¤Æ¤¤¤ë¹½Â¤Åª¤ÊºîË¡¤òƧ¤Þ¤¨¤Æ¡¢²æÎ® plug-in¤òº¬Ëܤ«¤é¸«Ä¾¤·ºîÀ®¤·Ä¾¤¹¤Ù¤¤Ç¤¢¤ë¤È¡¢ÄË´¶¤·¤Æ¤¤¤ë¤Î¤Ç¤¢¤ë¡£
¡ÖÃøÌ¾¤Ê¡×plug-in ¤ÈƱÍͤʹ½Â¤/ºîË¡¤òƧ¤Þ¤¨¤Æºî¤ë¤³¤È¤¬¡¢Â¾¼Ô¤«¤é¤â¼õ¤±Æþ¤ì¤é¤ì¤ëplug-in¤Ë¤â·Ò¤¬¤ë¤·¡¢¤ª¤½¤é¤¯¤Ï´Ø¿´¤â¸Æ¤Ö¤³¤È¤À¤í¤¦¡£
¤½¤ó¤Ê¤³¤È¤ò´¶¤¸¤Æ¤¤¤ëº£Æü¤³¤Îº¢¤Ê¤Î¤Ç¤¢¤ë¡£
¤³¤³¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ï IE ¤Ç¤Ïư¤¤Þ¤»¤ó¡£
animatedPopup µ¯Æ°¸å¤Ë¡¢Â³¤±¤ÆÊ̤ΠAnimation ¤òϢ³µ¯Æ°¤·¤Æ¤ß¤ë¡£
jQuery ¤Ç¤ÏϢ³¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òÍÆ°×¤Ë¼Â¹Ô¤µ¤»¤ë¤³¤È¤¬½ÐÍè¤ë¡£Î㤨¤Ð animatedPopup ¤Ë¤è¤ëɽ¼¨¤ò½ª¤¨¤¿¸å¤Ë¡¢¤½¤ÎÍ×ÁǤòÎ㤨¤Ð²èÌÌÆâ¤Ç°Üư¤¹¤ë¤È¤«¡¢¼¡Âè¤ËÉÔÆ©ÌÀ²½¤·¤Ê¤¬¤é¾ÃÌǤµ¤»¤ë¤È¤«¡£É½¼¨Îΰè¤ò½Ì¾®/³ÈÂ礹¤ë¤È¤«¡¢ÍÍ¡¹¤Ê¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òϢ³µ¯Æ°¤µ¤»¤ë¤³¤È¤¬²Äǽ¤À¡£
¤¢¤ë¤¤¤Ï¤Þ¤¿Ê£¿ô¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òƱ»þ¤ËÍú¹Ô¤µ¤»¤ë¤³¤È¤â½ÐÍè¤ë¡£¹¹¤Ë¥¢¥Ë¥á¡¼¥·¥ç¥ó½ªÎ»¸å¤Ë callback ´Ø¿ô¤òµ¯Æ°¤µ¤»¤Æ²¿¤é¤«¤Î½èÍý¤ò¤µ¤»¤ë¤³¤È¤â²Äǽ¤À¡£¼«ºî¥×¥é¥°¥¤¥ó animatedPopup ¤ÎϢ³µ¯Æ°¤â¹Ô¤¨¤ë¤À¤í¤¦¡£
¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç¤Ï¤½¤ó¤ÊÊ£¿ô¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎϢ³Íú¹Ô¤ò»î¤ß¤ë¡£
animatedPopup ´Ø¿ôµ¯Æ°¤¬½ªÎ»¤¹¤ë¤È¡¢¥æ¡¼¥¶¡¼¤¬±£ÊÃÁàºî¤ò¹Ô¤ï¤Ê¤¤¸Â¤ê¡¢¤½¤ÎÍ×ÁǤϲèÌÌÆâ¤Ëɽ¼¨¤µ¤ì³¤±¤ë¡£¤³¤ì¤ò³è¤«¤·¤ÆÅö³ºÍ×ÁǤò¼«ºß¤Ë²èÌÌÆâ¤Ë°Üư¤µ¤»¤Æ¤ß¤ë¡£
ɽ¼¨¤¹¤ë¥³¥ó¥Æ¥ó¥Ä¤ÏÀè¤Î¥¨¥ó¥È¥ê¥¤Æ±Íͤ˾¥µ¥¤¥È¤Î¼Ì¿¿ÁǺà¤ò³èÍѤ·¡¢²èÌÌÆâ¤ò¼¡¤Î¤è¤¦¤Ë°Üư¤µ¤»¤ë¡£¤Þ¤º²èÌ̺¸¾å¤Ë animatedPopup ɽ¼¨¤¹¤ë¡£¤½¤Î¸å¡¢slideUp¡¢slideDown ¤ÇÍ·¤ó¤Ç¤«¤é¡¢²èÌÌÆâ¤ò±¦¾å ¢ª ±¦²¼ ¢ª º¸²¼¤È»þ·×²ó¤ê¤ËϢ³¤·¤Æ°Üư¤µ¤»¡¢ºÇ¸å¤ËºÇ½é¤Î°ÌÃÖ¤ËÌᤷ¤Æ¤«¤é fadeOut ¤µ¤»¤Æ¤ß¤ë¡£
°Üư®ÅÙ¤Ï 0.5¡¢1¡¢1.5¡¢2 Éäȼ¡Âè¤ËÃÙ¤¯¤·¡¢¤½¤ì¤¾¤ì¤Îư¤¤ò²Ã¸ºÂ®¤¹¤ë easing ¤âÈù̯¤ËÊѲ½¤µ¤»¡¢¾ÃÌÇ¤Ë¤Ï 2.5 Éäò³Ý¤±¤Æ¤ß¤¿¡£
¤³¤Î°ìÏ¢¤Îư¤¤ò¼Â¹Ô¤¹¤ë¤Ë¤Ï¡¢²¼¤Î¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤À¤±¤Ç¤è¤¤¡£¤³¤Î°ìÏ¢¤Î¼«Æ°¼Â¹Ô¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò³Ú¤·¤ó¤Ç¡Ê¡©¡ËÂפ¤¿¤¤¡£
¡Ê½Ðŵ¤Ï pixta ¡Ë
º£ÅÙ¤Ï animatedPopup ¤Ë¤è¤ë¥¢¥¤¥Æ¥àɽ¼¨¸å¤Ë¡¢¤½¤ì¤ò²èÌÌÆâ¤Ç²£°Üư¤µ¤»¤Ê¤¬¤é¡¢¥Õ¥§¡¼¥É¥¢¥¦¥È¤µ¤»¡¢Ä¾¤°¤Ë¥Õ¥§¡¼¥É¥¤¥ó¤µ¤»¡¢¤½¤Î¸å¾å¤Ø°Üư¤µ¤»¤Æ¤«¤é¾ÃÌǤµ¤»¤ë¡£
¡Ê½Ðŵ¤Ï pixta ¡Ë
²¼¤Î¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È¾å¤ÇÄêµÁ¤·¤¿ 2 ¤Ä¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òϢ³¼Â¹Ô¤¹¤ë¡£¤â¤¦°ìÅÙÆ±¤¸¥Ü¥¿¥ó¤ò²¡¤·¤¿¾ì¹ç¤Ë¤Ï¡¢Ï¢Â³¼Â¹Ô¤Î½çÈÖ¤òÊѤ¨¤Æ¼Â¹Ô¤¹¤ë¤è¤¦¤Ë¤·¤¿¡£
¤³¤³¤Ç¹Ô¤Ã¤¿Ï¢Â³¥¢¥Ë¥á¡¼¥·¥ç¥óºîÀ®¤Î²áÄø¤Ë¤ª¤¤¤Æ¡¢animatedPopup ¥×¥é¥°¥¤¥ó¤Ï¹¹¤Ë¿Ê²½¤ò¿ë¤²¤¶¤ë¤òÆÀ¤Ê¤«¤Ã¤¿¡£¸µ¡¹Ï¢Â³¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òÁÛÄꤷ¤Æ¤¤¤Ê¤¤»ÅÍͤÀ¤Ã¤¿¤«¤é¤À¡£
¤½¤Î³ÈÄ¥¤Ë´Ø¤¹¤ë¾ÜºÙ¤ÏÊ̹à¤Ë¤Æ½Ò¤Ù¤ë¤È¤·¤Æ¡¢¤³¤³¤Ç¤Ï¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç¼Â¸½¤·¤¿Ï¢Â³¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¥³¡¼¥É¤Ë¤Ä¤¤¤Æ¥á¥â¤È¤·¤Æ²òÀ⤷¤Æ¤ª¤¤¿¤¤¡£
Ϣ³¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¥³¡¼¥ÉºîÀ®²áÄø¤Ë¤ª¤¤¤Æ¡¢jquery.js ¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¥³¡¼¥É¤ò¤Þ¤¹¤Þ¤¹¿¼¤¯³Ø½¬¤»¤¶¤ë¤òÆÀ¤Ê¤«¤Ã¤¿¤·¡¢ºîÀ®ÅÓ¾å¤Ç¥¹¥¯¥ê¥×¥È¤Ë¹©Éפò²Ã¤¨¤¿²Õ½ê¤â¿¿ô¤Ë¾å¤Ã¤¿¤«¤é¤Ç¤¢¤ë¡£
¢£¤³¤Î¥¨¥ó¥È¥ê¤Ç¼Â¸½¤·¤¿Ï¢Â³¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¥³¡¼¥É ¡¡ // animatedPopup ¥×¥é¥°¥¤¥ó¤Î¥¤¥ó¥¯¥ë¡¼¥É 1:(function(){var s=document.createElement('script');s.src='http://blog-imgs-31.fc2.com/h/k/o/hkom/my_Utilize_jQuery2.js';s.type='text/javascript';document.getElementsByTagName('head')[0].appendChild(s);})(); ¡¡¡¡// ¥Ü¥¿¥ó¤Î¿§¤Å¤± 2:¡¡$(".btn711").css("backgroundColor","burlywood") 3:¡¡¡¡.mousedown(function(){$(this).css("backgroundColor","plum")}) 4:¡¡¡¡.mouseup(function(){$(this).css("backgroundColor","burlywood").blur()}); ¡¡¡¡ // ɽ¼¨¤¹¤ë¥³¥ó¥Æ¥ó¥Ä¤ÎºîÀ® 5:¡¡var contents0="¼¡¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òµ¯Æ°¤·¤Þ¤¹¡£"; 6:¡¡var contents1='<img src="http://image.pixta.jp/image/thumb/51/14d687c77d91104811600b9d9916948a.jpg" width=450 height=301 />'; 7:¡¡var contents2='<img src="http://image.pixta.jp/image/thumb/41/bf5a19a4278538425a476ed1e113f0a9.jpg" width=450 height=316 />'; 8:¡¡// ²èÁüÀèÆÉ¤ß 9:¡¡$("<div></div>").css("display","none").prependTo(document.body).html(contents1+contents2); 10: 11:$(function(){ ¡¡¡¡ // animatedPopup ¥×¥é¥°¥¤¥ó½ªÎ»¸å¤ËÍú¹Ô¤¹¤ë´Ø¿ôÄêµÁ¤½¤Î£± 12:¡¡startAfterAnima = function(){ 13:¡¡¡¡var ani1=$(window).width()-$(this).outerWidth()+"px"; 14:¡¡¡¡var ani2=$(window).height()-$(this).outerHeight()+'px'; 15:¡¡¡¡$("#dispElem").slideUp("slow").slideDown() 16:¡¡¡¡.animate({"left":'+='+ani1},500,"linear") 17:¡¡¡¡.animate({"top":"+="+ani2},{duration:1000,easing:"swing"}) 18:¡¡¡¡.animate({"left":"-="+ani1},{duration:1500,easing:"easeInOutExpo"}) 19:¡¡¡¡.animate({"top":"-="+ani2},{queue:true,duration:2000,easing:"easeInOutSine"}) 20:¡¡¡¡.animate({"opacity":0},2500,"swing",function(){$(this).empty().hide().css({"opacity":1})}); 21:¡¡} ¡¡¡¡ // animatedPopup ¥×¥é¥°¥¤¥ó½ªÎ»¸å¤ËÍú¹Ô¤¹¤ë´Ø¿ôÄêµÁ¤½¤Î£² 22:¡¡var startAfterAnima2 = function(){ 23:¡¡¡¡var ani=$(window).scrollTop(); 24:¡¡¡¡$("#dispElem").slideUp("slow").slideDown("slow") 25:¡¡¡¡.animate({"left":"0px"},{queue:false,duration:2000,easing:"swing"}) 26:¡¡¡¡.fadeOut("slow").fadeIn("slow").animate({"top":ani},{queue:true,duration:2000,easing:"easeInOutSine"}) 27:¡¡¡¡.animate({"opacity":0},2500,"swing",function(){$(this).empty().hide().css({"opacity":1})}); 28:¡¡} 29:¡¡// ³Æ¥Ü¥¿¥ó¥¯¥ê¥Ã¥¯»þ¤Î animatedPopup µ¯Æ° 30:¡¡$("#btn711-0").animatedPopup(contents0,["c","c"],1500,null,null,true); 31:¡¡$("#btn711-1").animatedPopup(contents1,["l","t"],2000,"easeOutElastic",null,null,true,startAfterAnima); 32:¡¡$("#btn711-2").animatedPopup(contents2,["c","c"],2000,"easeInOutExpo",null,null,true,startAfterAnima2); ¡¡// Ϣ³¤·¤ÆanimatedPopup ¥á¥½¥Ã¥É¤òµ¯Æ°¤¹¤ë½èÍý 33:¡¡// 3 ¤Ä¤Î¥Ü¥¿¥ó¤Î jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤òÇÛÎó¤ËÅÐÏ¿ 34:¡¡var ary = [$("#btn711-0"),$("#btn711-1"),$("#btn711-2")]; ¡¡¡¡ // ¼¡¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òµ¯Æ°¤µ¤»¤ë´Ø¿ô 35:¡¡var nextFunc =function(jQelem){ 36:¡¡¡¡if (!$("#dispElem").queue("fx").length){ 37:¡¡¡¡¡¡jQelem===ary[0] ? clearInterval(ival) : clearInterval(ival2); 38:¡¡¡¡¡¡jQelem.trigger("click"); 39:¡¡¡¡} 40:¡¡} 41:¡¡var ival,ival2; ¡¡¡¡ // 3 ÈÖÌܤΥܥ¿¥ó¤ËÂФ¹¤ë toggle ¥¤¥Ù¥ó¥ÈÄêµÁ 42:¡¡$("#btn711-3").toggle(function(){ 43:¡¡¡¡$(this).children(0).text("¥ê¥¾¡¼¥È¥×¡¼¥ë¡ÜÀ¶¿å»û"); 44:¡¡¡¡ary[1].trigger("click"); ¡¡¡¡¡¡ // £²¤Ä¤ÎÂÔµ¡´Ø¿ô¤òÄêµÁ 45:¡¡¡¡ival = setInterval(function(){nextFunc(ary[0]);},1000); 46:¡¡¡¡ival2 = setInterval(function(){nextFunc(ary[2]);},1500); 47:¡¡},function(){ 48:¡¡¡¡$(this).children(0).text("À¶¿å»û¡Ü¥ê¥¾¡¼¥È¥×¡¼¥ë"); 49:¡¡¡¡ary[2].trigger("click"); 50:¡¡¡¡ival = setInterval(function(){nextFunc(ary[0]);},1000); 51:¡¡¡¡ival2 = setInterval(function(){nextFunc(ary[1])},1500); 52:¡¡}); 53:});
¥³¡¼¥ÉÆâ¤Ëµ½Ò¤·¤¿¥³¥á¥ó¥È¤Ç¤«¤Ê¤êÀâÌÀ¤Ë¤Ê¤Ã¤Æ¤¤¤ë¤È»×¤¦¤¬¡¢¶ìÏ«¤·¤¿ÅÀ¤òÃæ¿´¤Ë¥á¥â¤·¤Æ¤ª¤¤¿¤¤¡£
´ö¤Ä¤«¤Î²Õ½ê¤Ç¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎƱ»þµ¯Æ°¤ò»î¤ß¤¿¡£queue:false ¤ËÀßÄꤷ¤Æ¤¤¤ë²Õ½ê¤¬Æ±»þ¿Ê¹Ô¤Î¤¿¤á¤Î¥³¡¼¥É¤Ç¡¢¶ñÂÎŪ¤Ë¤Ï°Üư¤·¤Ê¤¬¤é slideUp/Down ¤ò¹Ô¤ï¤»¤¿¡£
jQuery ¤Î animate ¥¤¥ó¥¹¥¿¥ó¥¹¥á¥½¥Ã¥É¤Î complete °À¤ò³èÍѤ·¤Æ¡¢animatedPopup ¥á¥½¥Ã¥É¤¬½ªÎ»¤·¤¿¸å¤ËÊ̤Υ¢¥Ë¥á¡¼¥·¥ç¥ó¤òµ¯Æ°¤µ¤»¤¿¡£#124-140 ¤ÇÄêµÁ¤·¤¿´Ø¿ô¤¬ complete ¥×¥í¥Ñ¥Æ¥£ÃÍ¤È¤Ê¤ë´Ø¿ô¤Ç¤¢¤ë¡£
animatedPopup ¥×¥é¥°¥¤¥ó¤Ï jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤È¤·¤ÆÄêµÁ¤·¤¿¡£¤½¤·¤Æ¤³¤³¤Ç°·¤Ã¤¿ 2 ¤Ä¤Î¼Ì¿¿É½¼¨¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ï¡¢¤½¤ì¤¾¤ì¤Î¸Æ¤Ó½Ð¤·¸µ¤¬ÊÌ¡¹¤Î¥Ü¥¿¥ó¤Ç¤¢¤ê¡¢animatedPopup ¤Ë¤Ï¹ª¤ß¤ËÊÖÃͤòÀßÄꤹ¤ë¤³¤È¤¬½ÐÍè¤Æ¤¤¤Ê¤¤¡£¤Ä¤Þ¤ê¥á¥½¥Ã¥É¥Á¥§¡¼¥ó¤¬»È¤¨¤Ê¤¤¡£
¤½¤³¤Ç jquery.js ¤Î ¥¤¥Ù¥ó¥È½èÍý¥á¥½¥Ã¥É¤È¤·¤ÆÄêµÁ¤µ¤ì¤Æ¤¤¤ë trigger ¥á¥½¥Ã¥É¤ò»È¤Ã¤Æ¡¢°Û¤Ê¤ë¸Æ¤Ó½Ð¤·¸µ¤«¤é¸Æ¤Ó½Ð¤µ¤ì¤ë animatedPopup ¥á¥½¥Ã¥É¤òϢ³µ¯Æ°¤µ¤»¤ë¤è¤¦¤Ë¤·¤¿¡£
¤µ¤ÆÍ×ÅÀ¤Ï¥¿¥¤¥Þ¡¼ÀßÄê¤À¡£Ã±½ã¤Ë 2 ¤Ä¤Î animatedPopup ¤òʤ٤ë¤À¤±¤Ç¤ÏºÇ¸å¤Î¤½¤ì¤·¤«ºîư¤·¤Ê¤¤¤Î¤À¡£¥³¡¼¥É¿Ê¹Ô¤Ï¥¢¥Ë¥á¡¼¥·¥ç¥ó¼Â¹Ô¤È¤Ï̵´Ø·¸¤Ë¼¡¹Ô¤Ø¼¡¹Ô¤Ø¤È¿Ê¤ó¤Ç¤·¤Þ¤¦¤«¤é¡¢Á°¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òÂԤĤ³¤È¤Ê¤¯¼¡¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬µ¯Æ°¤µ¤ì¤Æ¤·¤Þ¤¤¡¢·ë¶ÉºÇ¸å¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤À¤±¤¬É½¼¨¤µ¤ì¤ë¤Î¤À¡£
¤³¤Î¤¿¤á°¿¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬Æ°ºî¤·¤Æ¤¤¤ë´Ö¤Ï¡¢¼¡¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬µ¯Æ°¤µ¤ì¤Ê¤¤¤è¤¦¤Ë¤·¤Ê¤±¤ì¤Ð¤Ê¤é¤Ê¤¤¡£
¤½¤³¤Ç¡¢¥¿¥¤¥Þ¡¼¤ò»È¤Ã¤Æ¼¡¤Î¥¢¥Ë¥á¡¼¥·¥ç¥óµ¯Æ°¤òÍÞÀ©¤¹¤ë¤³¤È¤Ë¤·¤¿¡£
¤½¤³¤ÇÌäÂê¤È¤Ê¤ë¤Î¤Ï¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬¿Ê¹ÔÃæ¤Ç¤¢¤ë¤³¤È¤ò Javascript ¥¤¥ó¥¿¡¼¥×¥ê¥¿¤ËÃΤ餻¤ëÊýË¡¤À¡£jQuery ¥¤¥ó¥¹¥¿¥ó¥¹Ëè¤Ë¡¢¥á¥½¥Ã¥É queue("fx") ¤Ë animation ¤¬ÅÐÏ¿¤µ¤ì¤ë¤³¤È¤òÍøÍѤ¹¤ëÊýË¡¤¬°¿¤ë½ñÀҤ˽ñ¤¤¤Æ¤¢¤Ã¤¿¤Î¤Ç¤½¤ì¤ò»È¤Ã¤Æ¤ß¤¿¡£
¤â¤Ã¤È¹ª¤¤ÊýË¡¤Ï¤Ê¤¤¤Î¤À¤í¤¦¤«¡¢¤È»×¤¤¤¿¤ÁËܲȥµ¥¤¥È¤ò²þ¤á¤ÆÄ¯¤á¤Æ¤ß¤¿¡£¤¹¤ë¤È¡¢¶Ë¤á¤Æ´Êñ¤ÊÊýË¡¤¬¼Â¤Ï¸ºß¤·¤Æ¤¤¤ë¤³¤È¤ò»×¤¤ÃΤ餵¤ì¤¿¡£¤½¤ì¤Ï jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Î add ¥á¥½¥Ã¥É¤òÍøÍѤ¹¤ë¤â¤Î¤À¡£¤³¤ó¤ÊÉ÷¤Ëadd¥á¥½¥Ã¥É¤¬»È¤¨¤¿¤Î¤«¡ª¨¡¨¡¨¡¤È´¶¿´¤·¤Æ¤·¤Þ¤Ã¤¿¡£
¤·¤«¤·¡¢¤³¤ÎÊýË¡¤Ï 1 ¤Ä¤ÎÀäÂÐÇÛÃÖÍ×ÁǤò»È¤Ã¤Æ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¼Â¸½¤·¤Æ¤¤¤ë animatedPopup ¤Ç¤Ï¹ª¤¯ºÎÍѤ¹¤ë¤³¤È¤¬½ÐÍè¤Ê¤¤¤Ç¤¤¤ë¡£
´°À®¤·¤¿¼«ºî jQuery ¥×¥é¥°¥¤¥ó¡Ö animatedPopup ¡×¤ò¼ÂºÝ¤Ë»È¤Ã¤Æ¤½¤Î²ÄǽÀ¤ò¸«¶Ë¤á¤Æ¤ß¤è¤¦¤È»×¤¦¡£¤½¤ì¤Ï¤Þ¤¿¤³¤Î¥×¥é¥°¥¤¥ó¤Î PR ¤Ë¤â¤Ê¤ë¤À¤í¤¦¡£
¤Ê¤ª jQuery Ëܲȥµ¥¤¥È¤Î¥×¥é¥°¥¤¥ó¥µ¥¤¥È¤ËÅÐÏ¿¤·¤Æ¤ß¤¿¤¤¤¬¡¢±Ñ¸ì²òÀâ¤ò½ñ¤¯¼«¿®¤¬¤Ê¤¤¤Î¤Ç¹Ô¤¨¤Ê¤¤¤À¤í¤¦¡£¡Ê¶ì¾Ð¡Ë
¤µ¤Æ¡¢¤³¤Î¥¨¥ó¥È¥ê¥¤¤Ç¤Ï¡¢Â¾¥µ¥¤¥È¤Î¼Ì¿¿¤äư²è¤ò´ö¤Ä¤«¥Ý¥Ã¥×¥¢¥Ã¥×¤·¤Æ¤ß¤ë¡£
⤷¡¢¥È¥Ã¥×¥Ú¡¼¥¸¤ò·Ðͳ¤·¤Ê¤¤¤Ç¥À¥¤¥ì¥¯¥È¤Ë¥¢¥¯¥»¥¹¤¹¤ë¤³¤È¤òǧ¤á¤Ê¤¤ÁǺॵ¥¤¥È¤¬·ë¹½Â¿¤¤¤¿¤á¡¢¥À¥¤¥ì¥¯¥È¥¢¥¯¥»¥¹ ¤¬²Äǽ¤Ê Web ¥µ¥¤¥È¤Ë¸ÂÄꤷ¤ÆÃµ¤µ¤¶¤ë¤òÆÀ¤Ê¤«¤Ã¤¿¡£
Á´¤Æ¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ì¤Ð¡¢²èÌÌÃæ¿´Éô¤Ë¼Ì¿¿¤äư²è¤¬¥Ý¥Ã¥×¥¢¥Ã¥×¤µ¤ì¤ë¤è¤¦¤ËÀßÄꤷ¤¿¡£Ã¢¤· jquery ¥×¥é¥°¥¤¥ó animatedPopup ¤ÏIE¤Ç¤Ïư¤«¤Ê¤¤¤³¤È¤òÃǤ虜¤ëÆÀ¤Ê¤¤¡£
¾å¤Î5¤Ä¤Î animatedPopup ¥×¥é¥°¥¤¥ó³èÍÑ»öÎã¤Ë¤ª¤¤¤Æ¡¢¼¡¤ÎÅÀ¤ËÃåÌܤ·¤Æ¤â¤é¤¨¤ì¤Ð¹¬¤¤¤Ç¤¢¤ë¡£
¤Ê¤ª¡¢¤³¤Î¥¢¥Ë¥á¡Ý¥Æ¥Ã¥É¥Ý¥Ã¥×¥¢¥Ã¥×¤Î¥³¡¼¥É¤Ë¤Ä¤¤¤Æ¤Ï¡¢°ÊÁ°¤Î¥¨¥ó¥È¥ê¥¤ ¤Ç¾ÜºÙ¤Ë²òÀâ¤ò²Ã¤¨¤¿¤Î¤Ç¡¢»þ´Ö¤È¶½Ì£¤¬¤¢¤ì¤Ð¤½¤Á¤é¤ò¸«¤ÆÂפ¤¿¤¤¡£
¤µ¤Æ¡¢¾å¤Î£µ¤Ä¤Î¼Â¹Ô·ë²Ì¤Ë¤Ä¤¤¤Æ¤À¡£
¤Þ¤º¼Ì¿¿£´Ëç¤Ï¡Ö°ì±þ¡×ÀßÄêÄ̤ê¤Ëư¤¤¤Æ¤¯¤ì¤¿¡£¤·¤«¤·Æ°²è¤ÏËä¤á¹þ¤ß¥¿¥°¾ðÊ󤫤é¤Ï²£Éý¤ò¼«Æ°Åª¤Ë¤Ï¼èÆÀ¤Ç¤¤Ê¤«¤Ã¤¿¡£¡Ê object ¥¿¥°¤ä embed ¥¿¥°¤Ë¤Ï width Ãͤ¬ÌÀµ¤µ¤ì¤Æ¤¤¤ë¤¬¡¢¤³¤ì¤òjquery.js ¤ËÍѰդµ¤ì¤Æ¤¤¤ë outerWidth ¤äouterHeigh ¥á¥½¥Ã¥É¤Ç¤Ï¼èÆÀ¤Ç¤¤Ê¤¤¤è¤¦¤À¡£¡Ë
¤½¤³¤Ç¡¢¤ä¤à¤Ê¤¯Â裵°ú¿ô¤Ç¤¢¤ë options ¤Ë²£Éý»ØÄê¤òÆþ¤ì¤Æ¶¯À©Åª¤Ë²£Éý¤òÀßÄꤷ¤¿¡£
ư²è¤Ë¤ª¤¤¤Æ¤³¤Î¤è¤¦¤ÊÌäÂê¤Ï¤¢¤ë¤â¤Î¤Î¡¢°ìÉô¤ÎÌäÂê¤ò½ü¤¤¤ÆÀß·×Ä̤ê¤Îư¤¤ò¤·¤Æ¤¯¤ì¤ë¤³¤È¤¬³Î¤«¤á¤é¤ì¤¿¤Î¤Ç¡¢¡Ê..¡Ë¡Ê¡°¡°¡Ë¡Ê¡°¡£¡°¡Ë¡Ê¡ö¡°o¡°¡Ë¡Ê¡°O¡°¡Ë޳ŽÚ޼ްްްް¡ª¡ª¡ª
¤½¤Î°ìÉô¤ÎÌäÂê¤Ë¤Ä¤¤¤Æ¤Ï¹à¤ò²þ¤á¤Æ°Ê²¼¤Ëµ¤·¤¿¤¤¡£
°ìÉô¤ÎÌäÂêÅÀ¤È¤Ï¡¢Âè°ì¤Ë¡¢ÇØ·Ê¿§¤ä¥Ü¡¼¥À¡¼¤Î»ÅÍ͡ʿ§¡¦ÂÀ¤µ¡¦¼ïÎà¡Ë¤ò³Æ¥Ý¥Ã¥×¥¢¥Ã¥×¤ÇÊѲ½¤¹¤ë¤è¤¦¤Ë¥³¡¼¥É¤ò½ñ¤¤¤Æ¤¤¤ë¤Î¤Ë¡¢¤½¤¦¤Ê¤é¤º¡¢£µ¤ÄÁ´¤Æ¤ÎÇØ·Ê¿§¤¬Æ±¤¸¤Ë¤Ê¤Ã¤Æ¤·¤Þ¤Ã¤¿¤ê¡¢¥Ü¡¼¥À¡¼¤¬É½¼¨¤µ¤ì¤Ê¤«¤Ã¤¿¤ê¤·¤¿¤³¤È¤Ç¤¢¤ë¡£
¤³¤ÎÅÀ¤Ë¤Ä¤¤¤Æ¤Ï¡¢animatedPopup ¥×¥é¥°¥¤¥ó¤½¤Î¤â¤Î¤Î¥Ð¥°¤À¤Ã¤¿¤¿¤á¡¢¤½¤Î¥Ð¥°Â༣¤ËÁêÅö¤Î»þ´Ö¤òÈñ¤ä¤·¤Æ²þÁ±¤ò¿Þ¤Ã¤¿·ë²Ì¡¢¤ä¤Ã¤È°Õ¿Þ¤·¤¿¤È¤ª¤ê¤Ëɽ¼¨¤µ¤ì¤ë¤è¤¦¤Ë¤Ê¤Ã¤¿¡£
¤³¤Î¥Ð¥°¤Ï¸½ºß¤Ç¤ÏÂ༣ºÑ¤ß¤Ê¤Î¤Ç¡¢´û¤Ë¤³¤Î¡Ö°ìÉô¤ÎÌäÂê¡×¤ÏȯÀ¸¤·¤Ê¤¯¤Ê¤Ã¤¿¡£ÂèÆó¤ÎÌäÂêÅÀ¤Ï¾ðÊó¤ÎÀèÆÉ¤ß·çÇ¡¤Ç¤¢¤ë¡£²èÁü¤äư²è¤ÎÀèÆÉ¤ß»ØÄê¤ò¹Ô¤Ã¤Æ¤¤¤Ê¤«¤Ã¤¿¤¿¤á¡¢½é¤á¤Æ¤³¤Î¥Ú¡¼¥¸¤ò³«¤¤¤Æ¥Ü¥¿¥ó¥¯¥ê¥Ã¥¯¤·¤¿¤È¤¤Ë¤Ï¡¢²èÁü¤¬¤¦¤Þ¤¯É½¼¨¤µ¤ì¤Ê¤«¤Ã¤¿¤Î¤À¡£
µ×¤·¤¯²èÁü¤ò°·¤Ã¤Æ¤¤¤Ê¤«¤Ã¤¿¤Î¤Ç¡Ê¶ì¾Ð¡Ë¡¢ÅöÁ³»ØÄꤹ¤Ù¤ÀèÆÉ¤ß»ØÄê¤ò˺¤ì¤Æ¤¤¤¿¤Î¤À¡£
ÌÞÏÀ¤³¤ÎÅÀ¤â²ò·èºÑ¤ß¤Ç¤¢¤ë¡£
¾å¤Ç¤Ï¡¢°¿¤ë¥µ¥¤¥ÈÆâ¤Ë¸ºß¤·¤Æ¤¤¤ë²èÁü¤äư²è¤Î£±¤Ä¤ò¥Ý¥Ã¥×¥¢¥Ã¥×¤·¤¿¤¬¡¢¼¡¤Ë¥µ¥¤¥È¤½¤Î¤â¤Î¤ò¥Ý¥Ã¥×¥¢¥Ã¥×¤·¤Æ¤ß¤ë¡£¤³¤ì¤Ë¤Ï¥¤¥ó¥Ê¡¼¥Õ¥ì¡¼¥à¤ò»È¤¦¤³¤È¤¬Áê±þ¤·¤¤¡£
¤³¤³¤Ç¤Ï easing ¤Ïjquery.js ¤Î´ûÄêÃÍ¡Êswing¡Ë¤ò»ÈÍѤ·¡¢ÇØ·Ê¿§Åù¤Ï¥°¥ì¡¼·Ï¡¢easing ½êÍ×»þ´Ö¤Ï 1.8 ÉäȤ·¤¿¡£
¼Â¤Ï¥µ¥¤¥È¤Î½Ì¾®É½¼¨¤ò¹Ô¤¤¤¿¤¤¤Î¤À¤¬¡¢¤½¤ì¤ò¼Â¸½¤¹¤ëÊýË¡¤¬IE°Ê³°¤Ç¤Ïʬ¤«¤é¤Ê¤¤¤¿¤á¡¢ÅöÌ̤ÏÉÔ²Äǽ¤À¡£
»Äǰ¤Ê¤¬¤é IE ¤Ç¤Ï¤³¤³¤ÇÀâÌÀ¤¹¤ë¥×¥é¥°¥¤¥ó¤Ïư¤¤Þ¤»¤ó¡£
¤½¤ÎÍýͳ¤Ï IE8 ¤Î¥¨¥é¡¼¥á¥Ã¥»¡¼¥¸¤Ëµò¤ì¤Ð¡Ö jquery.js ¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó´ØÏ¢¥³¡¼¥É¤ËÌäÂêÍ¤ê ¡×¤Èɽ¼¨¤µ¤ì¤ë¤Î¤Ç¤¹¤¬¡¢Firefox¡¢Opera µÚ¤Ó Windows ÈÇ safari ¤ÇÌäÂê¤Ê¤¯¤³¤Î¥Ú¡¼¥¸¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤¬É½¼¨¤µ¤ì¤ë¤Î¤Ç¡¢¥¨¥é¡¼¥á¥Ã¥»¡¼¥¸¼«ÂΤΥ¨¥é¡¼¤Ç¤Ï¤Ê¤¤¤«¤È»×¤ï¤ì¤Þ¤¹¡£
¤Ä¤Þ¤êIE8¤Îɸ½à¥â¡¼¥É¤Ë¤ª¤±¤ë¥Ð¥°¤Ç¤Ï¤Ê¤¤¤«¤È¿ä¬¤·¤Æ¤¤¤Þ¤¹¡£
IE ¤Ç¤âư¤¯¤è¤¦²þÄû¤¹¤ë¤Ä¤â¤ê¤Ç¤¹¤¬¡¢¾å¤Î¤è¤¦¤ÊÍýͳ¤Ç¤¹¤Î¤ÇÂбþºö¤¬¸«¤Ä¤«¤ê¤Þ¤»¤ó¡£
¥Ý¥Ã¥×¥¢¥Ã¥×ɽ¼¨¤ò¥¢¥Ë¥á¡¼¥·¥ç¥ó¥á¥½¥Ã¥É¤ò»È¤Ã¤Æ¹Ô¤¦¤³¤È¤ò°ÕÌ£¤·¤Æ¤¤¤Þ¤¹¡£Î㤨¤Ð¶Ë¾®¤ÎÅÀ¤«¤é°ìÄê¤ÎÉý¤È¹â¤µ¤òͤ¹¤ëɽ¼¨¥Ü¥Ã¥¯¥¹¤ò¥º¡¼¥à¥Ý¥Ã¥×¥¢¥Ã¥×¤·¡¢¤½¤ì¤ò¾Ã¤¹¤È¤¤Ë¤Ï¥º¡¼¥à¥¢¥¦¥È¤¹¤ë¤è¤¦¤Ê¡¢¤½¤ó¤Ê¥Ý¥Ã¥Ã¥×¥¢¥Ã¥×¤Ç¤¹¡£
Windows Vista ¤Ç¥¦¥£¥ó¥É¥¦³«ÊÄ»þ¤Ë¹Ô¤ï¤ì¤ë¤è¤¦¤Ê¡¢¤¢¤Î¤è¤¦¤Ê¥º¡¼¥à¥¤¥ó/¥¢¥¦¥È¤ò¥Ý¥Ã¥×¥¢¥Ã¥×ɽ¼¨/±£Êäˤâ¼è¤êÆþ¤ì¤Æ¤ß¤¿¤¤¤È»×¤¤Î©¤Á 4·î11Æüº¢¤ËºîÀ®¤ò³«»Ï¤·¤Þ¤·¤¿¡£
²¿¤Ï¤µ¤Æ¤ª¤¡¢¤½¤Î¼ÂÎã¤ò¼¨¤¹¤³¤È¤¬Àè·è¤Ç¤·¤ç¤¦¡£
²¼¤Î¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È¤¢¤ë¤¤¤Ï¤½¤Î¶á˵¤Ë¡¢¤¢¤ë¤¤¤Ï²èÌÌÃæ±û¤Ë¡¢¤¢¤ë¤¤¤Ï²èÌ̱¦²¼¤Ë¡¢¤¢¤ë¤¤¤Ï»ØÄꤷ¤Æ¤¢¤ë°ÌÃÖ {left:100px,top:200px} ¤Ë¡¢¥Ý¥Ã¥×¥¢¥Ã¥×¤¬¥º¡¼¥à¥¤¥ó/¥¢¥¦¥È¤µ¤ì¤Þ¤¹¡£É½¼¨¤¹¤ëºÝ¤Î¥Ý¥Ã¥×¥¢¥Ã¥×¥µ¥¤¥º¤Ï½ç¤Ë300¡¢350¡¢400¡¢500px ¤Ë¡¢¤Þ¤¿¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ËÍפ¹¤ë»þ´Ö¤Ï¤½¤ì¤¾¤ì 1200¡¢600¡¢1600¡¢2000 ¥ß¥êÉäËÀßÄꤷ¤Æ¤¢¤ê¤Þ¤¹¡£
¥¯¥ê¥Ã¥¯¤·¤¿°ÌÃÖ¤Î˵¤Ë¥Ý¥Ã¥×¥¢¥Ã¥×ɽ¼¨¤·¤Þ¤¹¡£
¥¯¥ê¥Ã¥¯¤¹¤ë¤È²èÌ̤ÎÃæ±û¤Ë¥Ý¥Ã¥×¥¢¥Ã¥×ɽ¼¨¤·¤Þ¤¹¡£
¥¯¥ê¥Ã¥¯¤¹¤ë¤È²èÌ̤ᦲ¼¤Ë¥Ý¥Ã¥×¥¢¥Ã¥×ɽ¼¨¤·¤Þ¤¹¡£
¥¯¥ê¥Ã¥¯¤¹¤ë¤È»ØÄꤷ¤Æ¤¢¤ë°ÌÃ֤˥ݥåץ¢¥Ã¥×ɽ¼¨¤·¤Þ¤¹¡£
¥¯¥ê¥Ã¥¯¤¹¤ë¤È²èÌ̤ÎÃæ±û¤Ë°¿¤ë¥µ¥¤¥È¤Î°¿¤ë¼Ì¿¿¤ò¥Ý¥Ã¥×¥¢¥Ã¥×ɽ¼¨¤·¤Þ¤¹¡£¼Ì¿¿½Ðŵ¸µ¤Ï ¥Õ¥©¥È¥é¥¤¥Ö¥é¥ê ¤Ç¤¹¡£
Easing ¤Ï Animation ưºî®ÅÙ¤òÊѲ½¤µ¤»¤ë¡Ö²Ã®Å٥᥽¥Ã¥É¡×¤Î¤³¤È¤Ç¡¢¸µ¡¹ Flash ¥Ä¡¼¥ë¤Ç¤¢¤ë Acrion Script ¤Î Tween ¥¯¥é¥¹¤Î²Ã®Å٥᥽¥Ã¥É¤È¤·¤ÆÃÂÀ¸¤·¤¿¤è¤¦¤Ç¤¹¡£¡ÊȾ²ÄÄ̤ÎÃ챤·¤«»ý¤Á¹ç¤ï¤»¤Æ¤¤¤Ê¤¤¤Î¤Ç¡Ö¤è¤¦¤Ç¤¹¡×¤È¤·¤Æ¤ª¤¤Þ¤¹¡£¡Ë
¤³¤Î Easing ´Ø¿ô¤¬ jQuery ¥×¥é¥°¥¤¥ó¤È¤·¤ÆÄ󶡤µ¤ì¤Æ¤¤¤ë¤Î¤Ç¡¢Áᮤ½¤ì¤òƳÆþ¤·¡¢¤³¤Î¥Ú¡¼¥¸¤Ç¤Ï´º¤¨¤ÆÆ°¤¤Î·ã¤·¤¤ easeOutElastic ¤ò»ÈÍѤ·¤Þ¤·¤¿¡£ËÜÍ衢ʸ»ú¤òɽ¼¨¤¹¤ë¤Ë¤ÏÊѲ½¤Î·ã¤·¤¤ elastic ¤ÏÁê±þ¤·¤¯¤Ê¤¤¤Ç¤·¤ç¤¦¤¬¡¢Easing ¤ò½é¤á¤Æ»ÈÍѤ·¤¿µÇ°¤È¤·¤Æ¡Ö·ã¤·¤¤¡×¤â¤Î¤òÁªÂò¤·¤Æ¤ß¤¿¤Î¤Ç¤¹¡£
°ø¤ß¤Ë¡¢George Smith »á¤Ë¤è¤êÄ󶡤µ¤ì¤Æ¤¤¤ë¥×¥é¥°¥¤¥ó¡ÖEasing Plugin¡×¤Ï¡¢10¼ïÎढ¤ê¡¢³Æ¡¹¤Ë£³¤Ä¤Î¸ú²Ì¡ÊeaseIn¡¢easeOut¡¢easeInOut¡Ë¤ò»ý¤¿¤»¤Æ Easing ´Ø¿ô¤¬ÄêµÁ¤µ¤ì¤Æ¤¤¤ë¤¿¤á¡¢ÅÔ¹ç 30 ¼ïÎà¤Î easing ´Ø¿ô¤¬¤¢¤ê¤Þ¤¹¡£¢ª Plugins | jQuery Plugins
¤½¤Î Easing ¤Î³Æ¡¹¤Îư¤¤Î°ã¤¤¤ò¼¨¤·¤¿¥µ¥¤¥È¤È¤·¤Æ¶½Ì£¿¼¤¤¤Î¤Ï¡¢flash ¥à¡¼¥Ó¡¼¤Ç¤¹¤¬ easing_demo ¤¬¼Â¤Ëʬ¤«¤ê¤ä¤¹¤¯Í±×¤Ç¤¹¡£¤³¤ì¤Ë¤è¤ê¤½¤ì¤¾¤ì¤Î Easing ¤¬¤É¤ó¤Êµóư¤ò¤¹¤ë¤Î¤«°ìÌÜÎÆÁ³¤ËÍý²ò¤Ç¤¤Þ¤¹¡£easing ´Ø¿ôÆâ¤ÎÂå¿ô¼°¤¬¥°¥é¥Õ²½¤µ¤ì¤Æ¤¤¤ë¤³¤È¤âÈó¾ï¤ËͱפǤ¹¡£
¤½¤³¤Ç¡¢¤³¤Î¥Ç¥â¥µ¥¤¥È¤ò¤Þ¤Í¤Æ¡¢¤³¤Î¥Ú¡¼¥¸¾å¤Ç¼Â¸½¤·¤Æ¤¤¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¥Ý¥Ã¥×¥¢¥Ã¥×¤ËÂФ·¤Æ 32 ¼ïÎà¤Î Easing ¸ú²Ì¤òŬÍѤ¹¤ë¥ê¥¹¥È¥Ü¥Ã¥¯¥¹¤òÀßÃÖ¤·¤Æ¤ß¤Þ¤·¤¿¡£easing_demo ¤ËÈæ¤Ù¤ÆÊ¸»úɽ¼¨¤Î¾ì¹ç¤Ë¤Ï³Æ easing ¤Îº¹°Û¤¬¤ï¤«¤ê¤Ë¤¯¤¤¤Î¤Ç¤¹¤¬¡¢¤Þ¤¢¤½¤ì¤Ï¤´°¦·É¤È¤¤¤¦¤³¤È¤Ç...¡£
¤³¤Î¥Ú¡¼¥¸¤Î¥½¡¼¥¹¥³¡¼¥É¤òɽ¼¨¤¹¤ì¤Ðʬ¤«¤ë¤³¤È¤Ç¤¹¤¬¡¢jquery.js ¤ò»È¤Ã¤Æ½é¤á¤Æ form ¤ò°·¤Ã¤¿¤Î¤Ç¡¢µÏ¿¤ò»Ä¤¹¤¿¤á¤Ë´º¤¨¤Æ¤³¤³¤Ëµ¤·¤Þ¤¹¡£
¢£¥¢¥¤¥Æ¥à¤¬ÁªÂò¤µ¤ì¤¿ºÝ¤Î½èÍý¤ò¹Ô¤¦¥¹¥¯¥ê¥×¥È¥³¡¼¥É
$("#sel707").change(function(){
¡¡var index = this.selectedIndex,
¡¡¡¡¡¡selEasing = this.options[index].value,
¡¡¡¡¡¡txt="¤³¤ì¤Ï easing ´Ø¿ô¡§ "+selEasing+" ¤ò»È¤Ã¤Æ<br />ɽ¼¨/±£Ê乤륢¥Ë¥á¡¼¥·¥ç¥ó¥Ý¥Ã¥×¥¢¥Ã¥×¤Ç¤¹¡£";
¡¡$(this).animatedPopup(txt,["c","c"],2000,selEasing,{width:"400px"});
});
°Ê¾å¤Î´Êñ¤Ê¥³¡¼¥É¤Ë¤è¤Ã¤Æ¡¢¥ê¥¹¥È¥Ü¥Ã¥¯¥¹Æâ¤Î¹àÌܤ¬ÁªÂò¤µ¤ì¤¿¤½¤Î½Ö´Ö¤ËȯÀ¸¤¹¤ë change ¥¤¥Ù¥ó¥È¤Ë¤è¤ê¡¢¥¤¥Ù¥ó¥È¥Ï¥ó¥É¥é¡¼¤¬µ¯Æ°¤µ¤ì¤ÆÉ¬ÍפʽèÍý¤ò¹Ô¤¤¤Þ¤¹¡£
¡ã°ú¿ô¤ÎÀâÌÀ¡ä
* contents¡§ Strings in Animated Popup
* layout: displaying position of Animated Popup
* text,ex. ["c","t"] (It means :left="center",top="top")
* or object,ex.{left:"100px",top:"200px"}
* or {left:"center",top:"100px"}
* duration: durating time of animation(msec), ex.500 or "slow" etc.
* easing: easing name (text), ex."easeInOutQuad","easeOutBounce",..32Ä̤ê¤Î»ØÄ꤬²Äǽ
* ⤷ 32 ¼ïÎà¤òÍøÍѤ¹¤ë¤Ë¤Ï Easing Plugin ¤òÁȤ߹þ¤àɬÍפ¬¤¢¤ë¡£
* ¤³¤Î¥µ¥¤¥È¤ÇÍøÍѤ·¤Æ¤¤¤ë jquery.js ¤Ë¤Ï Easing Plugin ¤òÁȤ߹þ¤ßºÑ¤ß¤Ç¤¹¡£
* options: Add CSS Object to Popup DIV, ex.{width:"400px",ޥޥޥ}
* options2: Add CSS Object to Popup DIV's CLOSE Bar, ex.{background:"midnightblue",ޥޥޥ}
* Á´¤Æ¤Î°ú¿ô¤Ë¤Ï¥Ç¥Õ¥©¥ë¥ÈÃͤ¬ÀßÃֺѤߤʤΤÇÊ£¿ô¤ÎǤ°Õ¤Î°ú¿ô¤¬¾Êά¤µ¤ì¤Æ¤â¸íưºî¤·¤Þ¤»¤ó¡£
* ²¿¤â°ú¿ô¤¬¤Ê¤¤¾ì¹ç¡¢¤½¤Î»Ý¤òɽ¼¨¤¹¤ë animatedPopup ¤ò²èÌÌÃæ±û¤Ëɽ¼¨¤·¤Þ¤¹¡£¥³¡¼¥É¤ÏŤá¤Ë¤Ê¤ê¤Þ¤·¤¿¡£ÀâÌÀ¤ò´Þ¤á¤Æ 190 ¹Ô¤¢¤ê¤Þ¤¹¡£
¤³¤³¤Ç¤½¤ÎÁ´¤Æ¤ò·ÇºÜ¤·¥Ö¥í¥Ã¥¯¤´¤È¤Ë²òÀâ¤ò²Ã¤¨¤ë¤³¤È¤È¤·¤Þ¤¹¡£
1:(function($){
2:$.fn.extend({
3:animatedPopup: function(contents,layout,duration,easing,options,options2){
4:/*
5: * <Example of Implementation>
6: * jQuery("p").animatedPopup("And I love you so. Yesterday. Yellow Submarine.",
7: * ¡¡¡¡["c","b"],800,"swing",{width:"300px"})
8: *
9: * <arguments explanation >
10: * contents¡§ Strings in Animated Popup
11: * layout: displaying position of Animated Popup
12: * text,ex. ["c","t"] (It means :left="center",top="top")
13: * or object,ex.{left:"100px",top:"200px"}
14: * or {"left":"center","top":"100px"}
15: * duration: durating time of animation(msec), ex.500 or "slow" etc.
16: * easing: easing name (text), ex."easeInOutQuad","easeOutBounce",...
17: * options: Add CSS Object to Popup DIV, ex.{"width":"400px",ޥޥޥ}
18: * options2: Add CSS Object to Popup DIV's Title DIV, ex.{background:"midnightblue",ޥޥޥ}
19: *
20: * <history>
21: * released 2009/4/22 ver0.1
22: * update 2009/4/25 ver0.2, 2009/4/26 ver0.3
23: */
24:¡¡var jQInst=$(this), winWH = {width:$(window).width(),height:$(window).height()},
25:¡¡¡¡errFlag,lcr,tcb,xName,yName,m=[],addValue={x:0,y:0},isImg,
26:¡¡¡¡mousePos={left:0,top:0},xCenter=$(window).width()/2,yCenter=$(window).height()/2;
27:¡¡ // CSS ´ûÄêÃÍ¤Ï width Ãͤ¬ contents ¤Ë¤è¤êÊѤï¤ë¤Î¤Ç¡¢´Ø¿ô²½¤·¥¤¥ó¥¹¥¿¥ó¥¹Ëè¤ËÀßÄꤹ¤ë¡£
28:¡¡var¡¡defaultCSS =function(){
29:¡¡¡¡isImg = contents.match(/.*((<img.+src.+)|(<object.+)|(<embed.+)).*/i);
30:¡¡¡¡return {
31:¡¡¡¡¡¡"color":"white","font-weight":"bold","margin":0, "padding":"19px 5px 5px 5px",
32:¡¡¡¡¡¡/* ²èÁü¤Î¾ì¹ç¤³¤³¤Ç width ¤ò·è¤á¤Æ¤ÏÂÌÌÜ*/
33:¡¡¡¡¡¡"width": (isImg && isImg[1]) ? null : "300px",
34:¡¡¡¡¡¡"background-color":"royalblue", "border":"5px plum ridge", "text-align":"center",
35:¡¡¡¡¡¡"display":"block","visibility":"visible"
36:¡¡¡¡}
37:¡¡}
38:¡¡/* ¥Ý¥Ã¥×¥¢¥Ã¥×¤Ë»ÈÍѤ¹¤ëCSSÃͤòÀßÄꤹ¤ë*/
39:¡¡var popupCSS = $.extend(true,defaultCSS(),options || {});
40:¡¡/* closeBar CSSÃͤâÍÆ°×¤ËÊѹ¹¤Ç¤¤ë¤è¤¦¤ËÀßÄꤹ¤ë */
41:¡¡var¡¡closeBarCSS = function(){return $.extend(true,{
42:¡¡¡¡"position":"absolute","zIndex":"1001","text-align":"center",
43:¡¡¡¡"opacity":0.75,"top":0,"left":0,"width":"100%","cursor":"pointer",
44:¡¡¡¡"font-size":"small","lineHeight":"1.2em","background-color":"midnightblue"
45:¡¡},options2 || {})};
46:
47:¡¡// bind onmousemove event on document
48:¡¡mousePos.oX = 4; mousePos.oY = 16; //¥Þ¥¦¥¹¥«¡¼¥½¥ë¤«¤é¤ÎÎ¥³Öµ÷Î¥
49:¡¡$(window).mousemove(function(e){
50:¡¡¡¡mousePos.left = (jQuery.browser.msie ? window.event.clientX - document.body.clientLeft : e.clientX) + mousePos.oX;
51:¡¡¡¡mousePos.top = (jQuery.browser.msie ? window.event.clientY - document.body.clientTop : e.clientY) + mousePos.oY;
52:¡¡});
53:
54:¡¡// error ½èÍý´Ø¿ô(¸å¤Ë³ÈÄ¥¤Ç¤¤ë¤è¤¦¤Ë´Ø¿ô¤Ë¤·¤Æ¤ª¤¯)
55:¡¡var errFunc = function(){ errFlag=true; return function(){return}}
56:
57:¡¡// animatedPopup ¤ÎÇÛÃÖ°ÌÃÖ»»½Ð´Ø¿ô
58:¡¡var getPos = function(layout){
59:¡¡¡¡if (layout && layout.constructor!= Object && layout.constructor!= Array ){
60:¡¡¡¡¡¡alert("ÇÛÃ֤ϣ²¤Ä¤Î¥Æ¥¥¹¥È¡§Îã \"Center\",\"Top\" ¡¢¤Þ¤¿¤Ï\n¥ª¥Ö¥¸¥§¥¯¥È·Á¼°¡§Îã {left:\"10px\",top:\"100px\"} ¤Ç»ØÄꤷ¤Æ¤¯¤À¤µ¤¤¡£");
61:¡¡¡¡¡¡errFunc()();
62:¡¡¡¡}
63:¡¡¡¡var setPos = layout;
64:¡¡¡¡if (setPos.constructor==Array) {
65:¡¡¡¡¡¡var chk1 = /^((l.*)|(c.*)|(r.*))/.exec(setPos[0].toLowerCase());
66:¡¡¡¡¡¡var chk2 = /^((t.*)|(c.*)|(b.*))/.exec(setPos[1].toLowerCase());
67:¡¡¡¡¡¡if (chk1 && chk2){
68:¡¡¡¡¡¡¡¡lcr = chk1[2] && "left" || chk1[3] && "center" || chk1[4] && "right";
69:¡¡¡¡¡¡¡¡tcb = chk2[2] && "top" || chk2[3] && "center" || chk2[4] && "bottom";
70:¡¡¡¡¡¡¡¡xName = (lcr!=="right") ? "left" : "right";
71:¡¡¡¡¡¡¡¡yName = (tcb!=="bottom") ? "top" : "bottom";
72:¡¡¡¡¡¡} else {
73:¡¡¡¡¡¡¡¡if (!chk1 && !chk2) {
74:¡¡¡¡¡¡¡¡¡¡alert("º¸±¦¾å²¼ \""+ setPos[0] +" , "+ setPos[1] +"\" ¶¦¤Ë»ØÄ꤬´Ö°ã¤Ã¤Æ¤¤¤Þ¤¹¡£\n¤ä¤êľ¤·¤Æ¤¯¤À¤µ¤¤¡£");
75:¡¡¡¡¡¡¡¡} else if (!chk1 && chk2){
76:¡¡¡¡¡¡¡¡¡¡alert("º¸±¦¤Î»ØÄê \""+ setPos[0] +"\" ¤¬´Ö°ã¤Ã¤Æ¤¤¤Þ¤¹¡£\n¤ä¤êľ¤·¤Æ¤¯¤À¤µ¤¤¡£");
77:¡¡¡¡¡¡¡¡} else if (chk1 && !chk2 ){
78:¡¡¡¡¡¡¡¡¡¡alert("¾å²¼¤Î»ØÄê \""+ setPos[1] +"\" ¤¬´Ö°ã¤Ã¤Æ¤¤¤Þ¤¹¡£\n¤ä¤êľ¤·¤Æ¤¯¤À¤µ¤¤¡£");
79:¡¡¡¡¡¡¡¡}
80:¡¡¡¡ ¡¡¡¡errFunc()();
81:¡¡¡¡¡¡}
82:¡¡¡¡} else if (typeof setPos!=="string" && setPos.constructor==Object) {
83:¡¡¡¡¡¡for (name in setPos){
84:¡¡¡¡¡¡¡¡name=name.toLowerCase();
85:¡¡¡¡¡¡¡¡if (name=="left" || name=="right") {xName = name;lcr=name}
86:¡¡¡¡¡¡¡¡if (name=="top" || name=="bottom") {yName = name;tcb=name}
87:¡¡¡¡¡¡}
88:¡¡¡¡¡¡if (xName==null || yName==null){
89:¡¡¡¡¡¡¡¡alert("left¡¢right¡¢top¡¢bottom °Ê³°¤Î\n»ØÄê¤Ï̵¸ú¤Ç¤¹¡£¤ä¤êľ¤·¤Æ¤¯¤À¤µ¤¤¡£");
90:¡¡¡¡¡¡¡¡errFunc()();
91:¡¡¡¡¡¡}
92:¡¡¡¡¡¡// °ÌÃÖ»ØÄêÃͤ¬ "left" ¤Î¤è¤¦¤Ëʸ»ú¤Ç°Ù¤µ¤ì¤¿¤È¤¤ÎÂбþ
93:¡¡¡¡¡¡if (!setPos[xName].match(/\d+/))
94:¡¡¡¡¡¡¡¡m[0] = setPos[xName].toLowerCase().match(/^(left|center|right)$/);
95:¡¡¡¡¡¡if (!setPos[yName].match(/\d+/))
96:¡¡¡¡¡¡¡¡m[1] = setPos[yName].toLowerCase().match(/^(top|center|bottom)$/);
97:¡¡¡¡¡¡if (!setPos[xName].match(/\d+/) && m[0]===null || !setPos[yName].match(/\d+/) && m[1]==null){
98:¡¡¡¡¡¡¡¡alert("ÇÛÃÖ»ØÄêÃͤ¬´Ö°ã¤Ã¤Æ¤¤¤Þ¤¹¡£\n¤ä¤êľ¤·¤Æ¤¯¤À¤µ¤¤¡£");
99:¡¡¡¡¡¡¡¡errFunc()();
100:¡¡¡¡¡¡}
101:¡¡¡¡¡¡addValue={
102:¡¡¡¡¡¡¡¡x :( m[0] ? ((m[0]==="center") ? xCenter :0) : parseInt(setPos[xName])),
103:¡¡¡¡¡¡¡¡y :( m[1] ? ((m[1]==="center") ? yCenter :0) : parseInt(setPos[yName]))
104:¡¡¡¡¡¡};
105:¡¡¡¡} else if(layout){
106:¡¡¡¡¡¡alert("ÇÛÃÖ»ØÄ̵꤬¸ú¤Ç¤¹¡£¤ä¤êľ¤·¤Æ¤¯¤À¤µ¤¤¡£");¡¡errFunc()();
107:¡¡¡¡}
108:¡¡¡¡var obj={};
109:¡¡¡¡obj[xName]= ((lcr==="center") ? xCenter : 0) + addValue.x;
110:¡¡¡¡obj[yName]= ((tcb==="center") ? yCenter : 0) + addValue.y;
111:¡¡¡¡return obj;
112:¡¡};
113:
114:$(function(){
115:¡¡// popup ɽ¼¨ÍѤΠdiv Í×ÁÇ¥¿¥°¤ÎºîÀ®
116:¡¡if (!$("#dispElem").size()) {
117:¡¡¡¡$("<div id='dispElem'></div>").css({
118:¡¡¡¡¡¡position:"absolute",display:"none",zIndex:"1000"
119:¡¡¡¡}).appendTo(document.body);
120:¡¡}
121:¡¡var disp=$("#dispElem");
122:
123:¡¡// Popup ±£ÊÃÍѡߥ¿¥°¤ÎºîÀ®
124:¡¡if (!$("#xMark").size()){
125:¡¡¡¡$("<div id='xMark'>CLOSE</div>").append("<div style='width:13px;float:right;margin-top:-1em;'>¡ß</div>").appendTo(disp);
126:¡¡}
127:¡¡var xMark = $("#xMark").css(closeBarCSS());
128:
129:¡¡// STEP1:*************** ɽ¼¨Á°¤Ë popup ¥¨¥ì¥á¥ó¥È¤Î¹â¤µ¤ò¬Äꤹ¤ë
130:¡¡var getElemWH= function(){ // ɽ¼¨ popup ¥µ¥¤¥º»»Äê
131:¡¡¡¡// popup ɽ¼¨Á°¤Ë²£Éý¤Èʸ»ú¿ô¤Ë±þ¤¸¤¿¹â¤µ¤ò·×¬¤¹¤ë(Èóɽ¼¨ÉÁ²è¤Ç¬Äê)
132:¡¡¡¡contents = contents || "¥Ý¥Ã¥×¥¢¥Ã¥×¤¹¤ëÆâÍÆ¤¬»ØÄꤵ¤ì¤Æ¤¤¤Þ¤»¤ó¡£<br />¤ä¤êľ¤·¤Æ¤¯¤À¤µ¤¤¡£";
133:¡¡¡¡disp.html(contents).css($.extend(true,popupCSS,{"visibility":"hidden","height":null}));
134:¡¡¡¡if(isImg && isImg[1]) disp.css("width",null);
135:¡¡¡¡return {
136:¡¡¡¡¡¡iW: popupCSS.width=(options && parseInt(options.width) || defaultCSS().width && parseInt(defaultCSS().width) || disp.width()),
137:¡¡¡¡¡¡iH: popupCSS.height=disp.height(),
138:¡¡¡¡¡¡oW: disp.outerWidth(),oH: disp.outerHeight()
139:¡¡¡¡}
140:¡¡}
141:
142: ¡¡// Éý/¹â¤µ¤¬¶Ë¾®¤ÎÍ×ÁÇ css ÃͤòÀßÄꤹ¤ë¡£¤³¤ì¤Ë¤è¤ê³ÈÄ¥/½Ì¾®¤ò±é½Ð¤¹¤ë¡£
143: ¡¡// ¤Þ¤¿¤³¤³¤Ç½é¤á¤Æ¥¹¥¯¥í¡¼¥ë¤µ¤ì¤Æ¤¤¤¿¾ì¹ç¤ÎÊÑÆ°ÃͤòÇÛÃÖpxÃͤËÄɲ乤롣
144:¡¡var shrinkCSS=function(){
145:¡¡¡¡var scrLeft=$(window).scrollLeft(),scrTop=$(window).scrollTop(),
146:¡¡¡¡¡¡obj={"width":"1px", "height":"1px", "border":"0px", "padding":"0px","margin":"0px"};
147:¡¡¡¡if (!layout){
148:¡¡¡¡¡¡obj.left=mousePos.left+scrLeft+"px";
149:¡¡¡¡¡¡obj.top=mousePos.top+scrTop+"px";
150:¡¡¡¡} else {
151:¡¡¡¡¡¡var pos = getPos(layout);
152:¡¡¡¡¡¡if (errFlag) return;
153:¡¡¡¡¡¡obj.left=((xName=="left")-(xName=="right"))*pos[xName]+
154:¡¡¡¡¡¡¡¡(xName=="right")*winWH.width + scrLeft+"px";
155:¡¡¡¡¡¡obj.top=((yName=="top")-(yName=="bottom"))*pos[yName]+
156:¡¡¡¡¡¡¡¡(yName=="bottom")*winWH.height + scrTop+"px";
157:¡¡¡¡}
158:¡¡¡¡return obj;
159:¡¡}
160:
161:¡¡var hideElem = function(e){ // popup Í×ÁǤò¥¢¥Ë¥á¡¼¥·¥ç¥ó±£Ê乤ë
162:¡¡¡¡disp.empty().animate(shrinkCSS(),{queue:false,duration:duration,easing:easing});
163:¡¡}
164:¡¡var animaElem = function(e){
165:¡¡¡¡$(":animated").queue('fx',[]).stop(); // ÅÐÏ¿ºÑ¤ß¤Î¥¢¥Ë¥á¤òÁ´¤Æºï½üÄä»ß¤¹¤ë
166:¡¡¡¡var doneShrink = shrinkCSS(); // ¤³¤Î´Ø¿ôÆâ¤Ç1²ó¤À¤±µ¯Æ°¤¹¤ë
167:¡¡¡¡if (errFlag) return;
168:¡¡¡¡// STEP2:***************
169:¡¡¡¡var elemWH = getElemWH(); //¥¨¥ì¥á¥ó¥È¥µ¥¤¥º·×¬¼Â¹Ô
170:¡¡¡¡if (!layout){ // ²èÌ̤«¤é¤Ï¤ß½Ð¤µ¤Ê¤¤¤è¤¦¤Ë CSS ÃͤòÄ´À°
171:¡¡¡¡¡¡if (winWH.width < mousePos.left+elemWH.oW)
172:¡¡¡¡¡¡¡¡popupCSS.left = winWH.width + $(window).scrollLeft() - elemWH.oW +"px";
173:¡¡¡¡¡¡if (winWH.height < mousePos.top+elemWH.oH)
174:¡¡¡¡¡¡¡¡popupCSS.top = winWH.height + $(window).scrollTop() - elemWH.oH +"px";
175:¡¡¡¡} else { // popup ¤ò¥»¥ó¥¿¡¼ÇÛÃÖ¤¹¤ë¾ì¹ç¤Î CSS ÀßÄê
176:¡¡¡¡¡¡popupCSS.left = parseInt(doneShrink.left) -
177:¡¡¡¡¡¡¡¡((lcr==="center" || m[0] && m[0]==="center") ? Math.round(elemWH.oW/2) : (xName==="right") ? Math.round(elemWH.oW) :0) +"px";
178:¡¡¡¡¡¡popupCSS.top = parseInt(doneShrink.top) -
179:¡¡¡¡¡¡¡¡((tcb==="center" || m[1] && m[1]==="center") ? Math.round(elemWH.oH/2) : (tcb==="bottom") ? Math.round(elemWH.oH) :0) +"px";
180:¡¡¡¡}
181:
182:¡¡¡¡// STEP3:*************** ¶Ë¾®Í×ÁǤò»ØÄꤵ¤ì¤¿¥¢¥Ë¥á¡¼¥·¥ç¥óµ¯Æ°°ÌÃÖ¤ËÇÛÃÖ
183:¡¡¡¡// dispElem ¤ÎÉý¤È¹â¤µ¤ò1px¤Ë¤·¤Æ½êÄê°ÌÃÖ¤ËÇÛÃÖ¤¹¤ë¡Ê⤷Èóɽ¼¨ÉÁ²è¡Ë
184:¡¡¡¡disp.empty().css(doneShrink);
185:¡¡¡¡// STEP4:*************** ɽ¼¨¥¢¥Ë¥á¡¼¥·¥ç¥ó
186:¡¡¡¡disp.html(contents).append(xMark.css(closeBarCSS()))
187:¡¡¡¡¡¡.css({visibility: "visible",display:"block"})
188:¡¡¡¡¡¡.animate(popupCSS,{queue:false,duration:duration||"slow",easing:easing||"swing"});
189:¡¡¡¡// STEP5:*************** ¡ß ¥¯¥ê¥Ã¥¯»þ¤Ë±£ÊÃ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òµ¯Æ°¤¹¤ë¡£
190:¡¡¡¡// ¤³¤³¤Ç±£Êôؿô¤òµ¯Æ°¤¹¤ë¤è¤¦¤Ë¤·¤Æ¤ª¤«¤Ê¤¤¤È¡¢Ê£¿ô²ó¥Ü¥¿¥ó¤¬¥¯¥ê¥Ã¥¯¤µ¤ì¤¿
191:¡¡¡¡// ¾ì¹ç¤Ë±£ÊÃÁàºî¤¬¤Ç¤¤Ê¤¯¤Ê¤ë¡£Íýͳ¤Ï̤²òÌÀ¡£
192:¡¡¡¡xMark.click(hideElem);
193:¡¡}
194:¡¡jQInst.click( errFlag ? function(){errFlag=false; $(this).unbind("click");} : animaElem );
195:}); // End of "DOMReady function"
196:} // End of "animatedAlert function"
197:}); // End of "Extend function"
198:})(jQuery);
¤½¤Î°ÕÌ£¤äÌò³ä¤«¤é´ö¤Ä¤«¤Î¥Ö¥í¥Ã¥¯¤Ëʬ¤±¤Æ²òÀ⤷¤Þ¤¹¡£
¤Þ¤ººÇ½é¤Î¥Ö¥í¥Ã¥¯¤Ï¡¢¤³¤Î¥á¥½¥Ã¥É¤Î°ú¿ô¤òÄêµÁ¤·¤½¤ì¤é¤ò²òÀ⤷¤Æ¤¤¤ëÉôʬ¤Ç¤¹¡£
¤³¤Î¥×¥é¥°¥¤¥ó¤Ç¤Ï¡¢°ìÈÌŪÊýË¡¤ËÊï¤Ã¤ÆÁ´ÂΤò̵̾´Ø¿ô¤Ç³ç¤ê¡¢Â¨¼Â¹Ô¤¹¤ë¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£¤Þ¤¿¥Ý¥Ã¥×¥¢¥Ã¥×ɽ¼¨¤ä¥Ý¥Ã¥×¥¢¥Ã¥×¾Ãµî¤Î¤¿¤á¤ÎÀäÂÐÇÛÃÖ div Í×ÁǤòÄɲä·¡¢¤«¤Ä¤½¤ì¤é¤ËÍÍ¡¹¤Ê¥á¥½¥Ã¥É¤òŬÍѤ¹¤ëɬÍפ¬¤¢¤ë¤³¤È¤«¤é¡¢É¬Í׺Ǿ®¸Â¤ÎÈϰϤò DOMReady function ¤Ç³ç¤ê¤Þ¤·¤¿¡£
¤³¤ì¤Ë¤è¤ê¡¢jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤Î¥á¥½¥Ã¥É¤È¤·¤Æ animatedPopup ´Ø¿ô¤òÅÐÏ¿¤·¤Þ¤¹¡£
°ú¿ô¤Ï£¶¤Ä¤¢¤ê¤Þ¤¹¡£Âè°ì°ú¿ô¤Ï¥Ý¥Ã¥×¥¢¥Ã¥×¥Ü¥Ã¥¯¥¹Æâ¤Ëɽ¼¨¤¹¤ëʸ»úÎó¤Ç¡¢Â裲°ú¿ô layout ¤ÏÍÍ¡¹¤ÊÊýË¡¤Ç¥Ý¥Ã¥×¥¢¥Ã¥×°ÌÃÖ¤ò»ØÄê¤Ç¤¤ë¤è¤¦¹©Éפ·¡¢Â裲°ú¿ô¤ò»ØÄꤷ¤Ê¤¤¾ì¹ç¤Ë¤Ï¡¢µ¯Æ°¸µ jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤¬»Ø¤·¼¨¤¹Í×ÁǤζá˵¤Ë¥Ý¥Ã¥×¥¢¥Ã¥×¤¹¤ë¤è¤¦¤ËÀ߷פ·¤Þ¤·¤¿¡£
Â裵µÚ¤ÓÂ裶°ú¿ô¤â¹©Éפ·¤Þ¤·¤¿¡£extend ¥á¥½¥Ã¥É¤Î£²¤Ä¤á¤Î»È¤¤Êý¡¢¤Ä¤Þ¤ê¡Ö ¥ª¥Ö¥¸¥§¥¯¥È³ÈÄ¥ ¡×¤òÍøÍѤ·¤Æ¡¢popup Í×ÁǤΥǥե©¥ë¥ÈCSS ¤òÀßÄꤷ¤Æ¤ª¤¯¤È¶¦¤Ë¡¢options ¤Ç¼«ºß¤Ë¤½¤ì¤òÊѹ¹¤Ç¤¤ë¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£Éý¤ä¿§¡¢¥Ü¡¼¥À¡¼¤Î¿§¤ÈÉýÅù¡¹µ¤Ê¬¼«Í³¤ËÊѹ¹¤¹¤ë¤³¤È¤¬½ÐÍè¤ë¤è¤¦¤Ë¤¹¤ë¤³¤È¤¬ÌÜŪ¤Ç¤¢¤ê¡¢¤½¤ì¤òãÀ®¤·¤Þ¤·¤¿¡£
¤Ê¤ª¡¢¤³¤ÎÊýË¡¤Ï jquery.js ¤Î Ajax ¥Ö¥í¥Ã¥¯¤ÇºÎÍѤµ¤ì¤Æ¤¤¤Þ¤¹¤Î¤Ç¤½¤ì¤ò»²¹Í¤Ë¹Í°Æ¤·¤Þ¤·¤¿¡£
¤³¤Î¥Ö¥í¥Ã¥¯¤Ï¡¢¥í¡¼¥«¥ëÊÑ¿ô¤òÄêµÁ¤·¤Æ¤¤¤ëÉôʬ¤Ç¤¹¡£
¢£ÊÑ¿ôÄêµÁÉôʬ¡ÊºÆ·Ç¡Ë
24:¡¡var jQInst=$(this), winWH = {width:$(window).width(),height:$(window).height()},
25:¡¡¡¡errFlag,lcr,tcb,xName,yName,m=[],addValue={x:0,y:0},isImg,
26:¡¡¡¡mousePos={left:0,top:0},xCenter=$(window).width()/2,yCenter=$(window).height()/2;
27:¡¡ // CSS ´ûÄêÃÍ¤Ï width Ãͤ¬ contents ¤Ë¤è¤êÊѤï¤ë¤Î¤Ç¡¢´Ø¿ô²½¤·¤¿¡£
28:¡¡var¡¡defaultCSS =function(){
29:¡¡¡¡isImg = contents.match(/.*((<img.+src.+)|(<object.+)|(<embed.+)|(<iframe.+)).*/i);
30:¡¡¡¡return {
31:¡¡¡¡¡¡"color":"white","font-weight":"bold","margin":0, "padding":"19px 5px 5px 5px",
32:¡¡¡¡¡¡/* ²èÁü¤Î¾ì¹ç¤³¤³¤Ç width ¤ò·è¤á¤Æ¤ÏÂÌÌÜ*/
33:¡¡¡¡¡¡"width": (isImg && isImg[1]) ? null : "300px",
34:¡¡¡¡¡¡"background-color":"royalblue", "border":"5px plum ridge", "text-align":"center",
35:¡¡¡¡¡¡"display":"block","visibility":"visible"
36:¡¡¡¡}
37:¡¡}
38:¡¡/* ¥Ý¥Ã¥×¥¢¥Ã¥×¤Ë»ÈÍѤ¹¤ëCSSÃͤòÀßÄꤹ¤ë*/
39:¡¡var popupCSS = $.extend(true,defaultCSS(),options || {});
40:¡¡/* closeBar CSSÃͤâÍÆ°×¤ËÊѹ¹¤Ç¤¤ë¤è¤¦¤ËÀßÄꤹ¤ë */
41:¡¡var closeBarCSS = function(){return $.extend(true,{
42:¡¡¡¡"position":"absolute","zIndex":"1001","text-align":"center",
43:¡¡¡¡"opacity":0.75,"top":0,"left":0,"width":"100%","cursor":"pointer",
44:¡¡¡¡"font-size":"small","lineHeight":"1.2em","background-color":"midnightblue"
45:¡¡},options2 || {})};
¤Þ¤ººÇ½é¤Ë¤³¤Î¥×¥é¥°¥¤¥ó¤Î¸Æ¤Ó½Ð¤·¸µ¤È¤Ê¤ë jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤ò¼èÆÀ¤·¤Þ¤¹¡£
DOMReady ´Ø¿ôÆâ¤Ç jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤ò¸Æ¤Ó½Ð¤½¤¦¤È¤·¤¿¤Î¤Ç¤¹¤¬¡¢´Ø¿ôÆâ¤Ç¤Ï this ¤Ï window ¥ª¥Ö¥¸¥§¥¯¥È¤ò»²¾È¤·¤Æ¤·¤Þ¤¦¤¿¤á¡¢Á°¤â¤Ã¤Æ¤³¤³¤Ç¼èÆÀ¤·¤Æ¤ª¤¯¤³¤È¤Ë¤·¤Þ¤·¤¿¡£
¤³¤ì¤Ï jquery.js ¤ÇÄêµÁ¤µ¤ì¤Æ¤¤¤ë¥¯¥í¥¹¥Ö¥é¥¦¥¶¤ÊÊØÍø¤Ê¥á¥½¥Ã¥É¤ò¤½¤Î¤Þ¤Þ³èÍѤ·¤Þ¤·¤¿¡£
¤³¤ì¤é¤ÎÃͤò¼èÆÀ¤¹¤ë°ÕÌ£¤Ï¡¢²èÌ̤ÎÃæ±û¤äº¸¤ä±¦¤Ë¥Ô¥¿¥ê¤È´ó¤»¤ÆÇÛÃÖ¤¹¤ë¾ì¹ç¤ËÍøÍѤ¹¤ë¤¿¤á¤Ç¤¹¡£
¥Ü¡¼¥À¡¼¤ä¥Ñ¥Ç¥£¥ó¥°¡¢¤½¤·¤Æ¿§¤ÈÇØ·Ê¿§¨¡¨¡¤³¤ì¤é¤Î½é´üÃͤòÄê¤á¤Æ¤ª¤«¤Ê¤¤¤È¤½¤ÎÅÔÅٻװƤ·³ÎÄꤷ»ØÄꤷ¤Ê¤±¤ì¤Ð¤Ê¤ê¤Þ¤»¤ó¡£¤³¤ì¤Ï¤¤¤«¤Ë¤âÌÌÅݤʤΤǴûÄêÃͤòÀßÄꤷ¤Þ¤·¤¿¡£options ¤ÇÆÃ¤Ë»ØÄꤷ¤Ê¤±¤ì¤Ð´ûÄêÃͤ¬Å¬ÍѤµ¤ì¤¿ popup Á뤬ɽ¼¨¤µ¤ì¤ë¤ï¤±¤Ç¤¹¡£
¼Â¤Ï²èÁü¤äư²è¤Ë¤âÂбþ¤µ¤»¤ë¤¿¤á¤Ë¡¢ºÇ½ªÃʳ¬¤Ç¤³¤Î¥Ö¥í¥Ã¥¯¤òÂ礤¯²þÊѤ·¤Þ¤·¤¿¡£
#29 ¤Ç¤ÏÀµµ¬É½¸½¤òÍøÍѤ·¤Æ img ¥¿¥°¡¢object ¥¿¥°¡¢embed ¥¿¥°¡¢¤¢¤ë¤¤¤Ï iframe ¥¿¥°Ê¸»úÎó¤¬Âè°ì°ú¿ô contents ¤Ë´Þ¤Þ¤ì¤ë¤«¤É¤¦¤«¤ò¥Á¥§¥Ã¥¯¤·¤Þ¤¹¡£¤½¤·¤Æ¤½¤ì¤é¤Î¤¤¤º¤ì¤«¤¬´Þ¤Þ¤ì¤ë¾ì¹ç¤Ë¤Ï¡¢¥Ç¥Õ¥©¥ë¥ÈÃͤȤ·¤Æ¤Î²èÁü¥µ¥¤¥º¤òÀßÄꤷ¤Ê¤¤¤³¤È¤È¤·¤Þ¤·¤¿¡£¡Ê#33¡Ë
¤³¤ì¤Ï°úÍÑÀè¤ÎCSSÀßÄê¤òÈ¿±Ç¤¹¤ë¾ì¹ç¤¬¤¢¤Ã¤¿¤Î¤Ç¡¢´º¤¨¤Æ width ÃͤòÄê¤á¤º¤Ë¤ª¤¤¤Æ¡¢°úÍÑÀ襵¥¤¥È¤Î padding ÀßÄêÃͤʤɤâÈ¿±Ç¤·¤¿ outerWidth Ãͤò¼èÆÀ¤¹¤ë¤¿¤á¤Ç¤¹¡£
¤³¤ì¤Ë¤Ï extend ¥á¥½¥Ã¥É¤Î£²¤Ä¤á¤Îµ¡Ç½¤Ç¤¢¤ë"¥Ü¥Ö¥¸¥§¥¯¥È³ÈÄ¥"¤òÍøÍѤ·¤Þ¤·¤¿¡£
options¤ÇǤ°Õ¤Î CSS ÃͤòÍ¿¤¨¤ì¤Ð¡¢¥Ç¥Õ¥©¥ë¥ÈCSS¤ò¾å½ñ¤¤·¤Æ¥æ¡¼¥¶¡¼¤ÎÍ×˾Ä̤ê¤Îɽ¸½¤ò¼Â¸½¤¹¤ë¤³¤È¤¬½ÐÍè¤Þ¤¹¡£¤Þ¤¿ ||{} ¤Ë¤è¤ê options ¤¬»ØÄꤵ¤ì¤Ê¤«¤Ã¤¿¾ì¹ç¤Ë¥Ç¥Õ¥©¥ë¥ÈÃͤòÍøÍѤ¹¤ë¤è¤¦¤Ë¹©Éפ·¤Þ¤·¤¿¡£
¤³¤ì¤â extend ¥á¥½¥Ã¥É¤Î"¥Ü¥Ö¥¸¥§¥¯¥È³ÈÄ¥"¤òÍøÍѤ·¤Þ¤·¤¿¡£
options2¤ÇǤ°Õ¤Î CSS ÃͤòÍ¿¤¨¤ì¤Ð¡¢¥Ç¥Õ¥©¥ë¥ÈÃͤò¾å½ñ¤¤·¤Æ¥æ¡¼¥¶¡¼¤ÎÍ×˾Ä̤ê¤Îɽ¸½¤ò¼Â¸½¤¹¤ë¤³¤È¤¬½ÐÍè¤Þ¤¹¡£¤Þ¤¿ ||{} ¤Ë¤è¤ê options2 ¤¬»ØÄꤵ¤ì¤Ê¤«¤Ã¤¿¾ì¹ç¤Ë¥Ç¥Õ¥©¥ë¥ÈÃͤòÍøÍѤ¹¤ë¤è¤¦¤Ë¹©Éפ·¤Þ¤·¤¿¡£
½ÅÍפÊÌò³ä¤ò²Ì¤¿¤¹¥í¡¼¥«¥ëÊÑ¿ô¤ò¤³¤³¤ÇÄêµÁ¤·¤Þ¤·¤¿¡£
addValue ¤ÏÇÛÃÖ°ÌÃÖ¤¬¥Ô¥¯¥»¥ë»ØÄꤵ¤ì¤¿¾ì¹ç¤Î¤½¤Î¥Ô¥¯¥»¥ëÃͤò³ÊǼ¤·¤Þ¤¹¡£
mousePos ¤Ï¥¤¥Ù¥ó¥ÈȯÀ¸Í×ÁǤζá˵¤Ë¥Ý¥Ã¥×¥¢¥Ã¥×¤òÇÛÃÖ¤¹¤ë¾ì¹ç¤ËɬÍפȤʤë¥Þ¥¦¥¹¥«¡¼¥½¥ë¤Î¸½ºßÃͤò½êÆÀ¤¹¤ë¤¿¤á¤ÎÊÑ¿ô¤Ç¤¹¡£
xCenter¡¢yCenter ¤Ï²èÌÌÃæ±û¤ËÇÛÃÖ¤¹¤ë¤¿¤á¤ËɬÍפÊÃͤǡ¢¤½¤ì¤¾¤ì²£Êý¸þ¤Î²èÌÌÃæ±û°ÌÃÖ¡¢½ÄÊý¸þ¤Î²èÌÌÃæ±û°ÌÃÖ¤ò¼èÆÀ¤·¤Þ¤¹¡£
Â裲°ú¿ô layout ¤ò»ØÄꤷ¤Ê¤¤¾ì¹ç¤Ë¡¢¥Þ¥¦¥¹¥«¡¼¥½¥ë¶á˵¤Ë¥Ý¥Ã¥×¥¢¥Ã¥×¤µ¤»¤ë¤¿¤á¤Ë¤Ï¡¢¥Þ¥¦¥¹¤Îư¤¤ò¾ï¤Ë Javascript¤¬ ¡Ö´Æ»ë¡× ¤·¤½¤Î°ÌÃÖ¤ò¼èÆÀ¤·¤Æ¤¤¤Ê¤±¤ì¤Ð¤Ê¤ê¤Þ¤»¤ó¡£¤½¤Î¤¿¤á¤Î¥¤¥Ù¥ó¥ÈÅÐÏ¿¤ò¹Ô¤¦Éôʬ¤Ç¤¹¡£¤³¤ì¤Ë¤è¤ê document ¤ÎǤ°Õ¤Î²Õ½ê¤Ë¤ª¤¤¤Æ¥Þ¥¦¥¹¥«¡¼¥½¥ë¤Îư¤¤ò¾ïÃó´Æ»ë¤·¡¢¤½¤Î°ÌÃÖ¤ò¼èÆÀ¤¹¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
47:¡¡// bind onmousemove event on document
48:¡¡mousePos.oX = 4; mousePos.oY = 16; //¥Þ¥¦¥¹¥«¡¼¥½¥ë¤«¤é¤ÎÎ¥³Öµ÷Î¥
49:¡¡$(window).mousemove(function(e){
50:¡¡¡¡mousePos.left = (jQuery.browser.msie ? window.event.clientX - document.body.clientLeft : e.clientX) + mousePos.oX;
51:¡¡¡¡mousePos.top = (jQuery.browser.msie ? window.event.clientY - document.body.clientTop : e.clientY) + mousePos.oY;
52:¡¡});
53:
54:¡¡// error ½èÍý´Ø¿ô
55:¡¡var errFunc = function(){ errFlag=true; return function(){return}}
¤³¤³¤Ç¤â IE ¤¬¡¢IE ¤À¤±¤¬ÆÃ¼ì¤ÊÊýË¡¤òºÎÍѤ·¤Æ¤ª¤ê¡¢¤½¤Î¤¿¤á¤ËÌÌÍŤÊÀßÄê¤ò¤·¤Ê¤±¤ì¤Ð¤Ê¤é¤Ê¤¤¤Î¤Ï¥æ¡¼¥¶¡¼¤Ë¤È¤Ã¤ÆÉÔ¹¬¤Ê¤³¤È¤Ç¤¹¡£Á᤯ IE ¤Î¥æ¡¼¥¶¡¼ÈæÎ¨¤¬Äã²¼¤¹¤ë¤³¤È¤ò´ê¤Ã¤Æ¤ä¤ß¤Þ¤»¤ó¡£IE8 ¤ÎÅоì¤Ë¤è¤ê¤½¤Î´ê¤¤¤Ï¤Þ¤¿³ð¤¦¤³¤È¤Ê¤¯ÀèÁ÷¤ê¤µ¤ì¤Æ¤·¤Þ¤¤¤Þ¤·¤¿¤¬¡¢ÃæÄ¹´üŪ¤Ë¤Ï IE ¸ÇͤλÅÍͤϾ䨵î¤ë±¿Ì¿¤Ë¤¢¤ë¤³¤È¤Ï´Ö°ã¤¤¤Ê¤¤¤Ç¤·¤ç¤¦¡£
¼ÂºÝ¡¢¸å¤Î¥¨¥ó¥È¥ê¥¤¤Ç¿¨¤ì¤Þ¤·¤¿¤¬¡¢IE8 ¤Ç¤Ï¾¯¤Ê¤¯¤È¤â¥¹¥¿¥¤¥ëÀßÄê¤Ë´Ø¤·¤Æ¤Ï Web ɸ½à½àµò¤ËÀÚ¤êÂØ¤ï¤ê¤Þ¤·¤¿¡£¤³¤ì¤Ï 1 ¼Ò¤À¤±¤Ç´è̤˸Ǽ¹¤·Â³¤±¤Æ¤¤¿Ôú¤ê¤¬¡¢10ǯÍè¤Î¥Ö¥é¥¦¥¶ÀïÁè¤ÎÃæ¤Ç¤ä¤Ã¤ÈÊø¤ìµî¤Ã¤¿¤³¤È¤ò°ÕÌ£¤·¤Æ¤ª¤ê¡¢µÇ°¤¹¤Ù¤Îò»ËŪ»ö·ï¤È¸À¤Ã¤Æº¹¤·»Ù¤¨¤Ê¤¤¤Ç¤·¤ç¤¦¡£
#54 ¤Î¥¨¥é¡¼Âбþ¤Ï¡Ö´Ø¿ô¤òÊÖÃͤȤ¹¤ë¡×ÆÃ¼ì¤Ê´Ø¿ô¤òÍøÍѤ·¤Þ¤¹¡£¤³¤ì¤Ë¤è¤êÊÖÃÍ¤Ï return Ãͤòͤ¹¤ë´Ø¿ô¤È¤Ê¤ë¤Î¤Ç¡¢errFunc()() ¤Î¤è¤¦¤Ë¤·¤Æ¡¢ÊÖÃͤǤ¢¤ë´Ø¿ô¤ò¸Æ¤Ó½Ð¤·Àè¤Ç¼Â¹Ô¤¹¤ë¤³¤È¤Ë¤è¤ê¥È¥Ã¥×¥ì¥Ù¥ë¤Ë¤ª¤¤¤Æ return ÃͤòÊÖ¤¹¤³¤È¤¬²Äǽ¤È¤Ê¤ê¤Þ¤¹¡£
¤³¤³¤ËºÇ½é¤Î³ç¸Ì¤Ï errFunc ´Ø¿ô¤ò¼Â¹Ô¤¹¤ë¤¿¤á¡¢2¤Ä¤á¤Î³ç¸Ì¤Ï errFunc ´Ø¿ô¤ÎÊÖÃͤȤ·¤Æ¤Î´Ø¿ô¤ò¼Â¹Ô¤¹¤ë¤¿¤á¤Ç¤¹¡£#61 ¤Ê¤É¿ï½ê¤Ç³èÍѤ·¤Æ¤¤¤Þ¤¹¡£
¤³¤Î¥Ö¥í¥Ã¥¯¤Ï¤¿¤Ã¤¿£±¤Ä¤Î¥á¥½¥Ã¥ÉÅÐÏ¿¤Ç¤¹¤¬Ä¹Âç¤Ë¤Ê¤ê¤Þ¤·¤¿¡£¤·¤«¤·¡¢ÍÍ¡¹¤Ê»ØÄêÊýË¡¤ËÂбþ¤¹¤ë¤¿¤á¤ËɬÍ×ÉԲķç¤ÊÉôʬ¤Ç¤¢¤ê¡¢Ä¹¤¯¤Ê¤Ã¤Æ¤·¤Þ¤Ã¤¿¤Î¤Ï¥¨¥é¡¼½èÍý¤ò¤Õ¤ó¤À¤ó¤ËÀ¹¤ê¹þ¤ó¤À¤¿¤á¤Ç¤â¤¢¤ê¤Þ¤¹¡£
ÉÔŬÀÚ¤Ê layout »ØÄ꤬¤¢¤Ã¤¿¾ì¹ç¤Î·Ù¹ðɽ¼¨¤È¥³¡¼¥É¿Ê¹ÔÄä»ß¤ò»ØÄꤷ¤Æ¤¤¤Þ¤¹¡£
#65-72 ¤Ç¡¢left¡¢le ¤¢¤ë¤¤¤Ï l ¤À¤±¤Ç¤â¼õÍÆ¤¹¤ë¤è¤¦¤Ë»ØÄêʸ»ú¤ò´Êά²½¤Ç¤¤ë¤è¤¦¤Ë¹©Éפ·¡¢½êÄê¤Îʸ»ú¤¬Í¿¤¨¤é¤ì¤¿¾ì¹ç¤Ë¤Ï¡¢¤½¤ì¤é¤ò left¡¢center¡¢right¡¢top¡¢bottom ¤Îʸ»úÎó¤ËÊÑ´¹¤·¤Æ¤¤¤Þ¤¹¡£
lcr ¤Ë¤Ï left¡¢center¡¢¤Þ¤¿¤Ï right ¤Îʸ»ú¤¬ÆþÎϤµ¤ì¡¢tcb ¤Ë¤Ï top¡¢center¡¢¤Þ¤¿¤Ï bottom ¤¬ÂåÆþ¤µ¤ì¤Þ¤¹¡£
¤Þ¤¿¡¢xName ¤Ë¤Ï left ¤« right ¤¬¡¢yName ¤Ë¤Ï top ¤« bottom ¤¬ÂåÆþ¤µ¤ì¤Þ¤¹¡£
#73-81 ¤ÏÇÛÎó»ØÄ꤬ŬÀڤǤϤʤ«¤Ã¤¿¾ì¹ç¤Î¥¨¥é¡¼½èÍý¤Ç¤¹¡£
#83-87¤Ç¤Ï layout ¥ª¥Ö¥¸¥§¥¯¥È¤òÁöºº¤·¤Æ¡¢ÇÛÃÖ»ØÄê¤Ë·¸¤ëÄêµÁÃͤò¼èÆÀ¤·¡¢ÊÑ¿ô¤ËÂåÆþ¤·¤Þ¤¹¡£Áܺº¤Î·ë²ÌɬÍפÊʸ»ú¤¬¤Ê¤±¤ì¤Ð #88-91 ¤Ç¥¨¥é¡¼½èÍý¤·¤Þ¤¹¡£
#93-97 ¤ÇÇÛÎó m ¤Ë²£Êý¸þ¤È½ÄÊý¸þ¤ÎÇÛÃÖ»ØÄêʸ»úÎó¤òÂåÆþ¤·¡¢layout ¤¬Å¬ÀڤʻØÄê¤Ç¤Ê¤±¤ì¤Ð¡¢#97-100 ¤Ç¥¨¥é¡¼½èÍý¤·¤Þ¤¹¡£
Æó¹à±é»»»Ò¤ò³èÍѤ·¤Æ¡¢¥»¥ó¥¿¡¼ÇÛÃÖ¤«Èݤ«¡¢µÚ¤Ó px »ØÄêÃͤ¬¤¢¤ë¾ì¹ç¤Î£²¤Ä¤Î¥±¡¼¥¹¤«¤éÃͤò¼èÆÀ¤·¤Þ¤¹¡£
¥¨¥é¡¼È¯À¸»þ¤Ë¤Ï¶õ¥ª¥Ö¥¸¥§¥¯¥È¤òÊÖ¤¹¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£
¥»¥ó¥¿¡¼ÇÛÃ֤ξì¹ç¤Î¤ß²èÌÌÃæ±û°ÌÃÖ¤ò¼èÆÀ¤·¡¢¤½¤Î¾¤Ï»ØÄꤵ¤ì¤Æ¤¤¤ì¤Ð¥Ô¥¯¥»¥ëÃͤòÂåÆþ¤·¤Þ¤¹¡£
¥Ö¥é¥¦¥¶¤Ë¤È¤Ã¤Æ¥Ý¥Ã¥×¥¢¥Ã¥×ÍÑÍ×ÁǤ¬ÍѰդǤ¤Ê¤±¤ì¤Ð²¿¤â»Ï¤á¤é¤ì¤Ê¤¤¤¿¤á¡¢¤³¤ì°Ê¹ß¤Ï DOMReady ´Ø¿ô¤Ç³ç¤ê¤Þ¤¹¡£
£²²óÌܰʹߤΠanimatedPopup µ¯Æ°»þ¤Ë dispElem ¤¬½ÅÊ£ÀßÃÖ¤µ¤ì¤Ê¤¤¤è¤¦¤Ë 116 ¹Ô¤Ç¤³¤Î¥Î¡¼¥É¤Î¸ºß³Îǧ¤ò¹Ô¤¤¤Þ¤¹¡£¤â¤·Â¸ºß¤¹¤ì¤Ð¡¢²þ¤á¤ÆÊÑ¿ô disp ¤ËÅö³º¥Î¡¼¥É¤ò»²¾È¤¹¤ë jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤òÅÐÏ¿¤·¤Þ¤¹¡£
¸ºß¤·¤Ê¤¤¾ì¹ç¤Ë¤Ï¡¢¥¿¥°Í×ÁǤò CSS ÀßÄêÃͤò´Þ¤á¤ÆºîÀ®¤·¡¢¤½¤Î¸å¤Ë jQuery ¥¤¥ó¥¹¥¿¥ó¥¹¤òºîÀ®¤·ÊÑ¿ô¤ËÂåÆþ¤·¤Þ¤¹¡£
¤³¤Î CSS ÀßÄê¤Ç¤ÏÀäÂÐÇÛÃÖ¡¢Èóɽ¼¨¡¢¥ì¥¤¥ä¡¼½ç¤ò»ØÄꤷ¡¢¥Ý¥Ã¥×¥¢¥Ã¥×¤ò¼«ºß¤ËÇÛÃ֤Ǥ¤ë¤è¤¦¤Ë¡¢¤Þ¤¿ body Éô¤ËÄɲä·¤¿»þÅÀ¤Ç¤Ï¤½¤ì¤¬É½¼¨¤µ¤ì¤Ê¤¤¤è¤¦½àÈ÷¤·¤Þ¤¹¡£
¥Ý¥Ã¥×¥¢¥Ã¥×ÍÑ div Í×ÁǤα¦¾å¤Ë¤³¤Î¥Ý¥Ã¥×¥¢¥Ã¥×¤ò±£Ê乤뤿¤á¤Î¥Ð¥Ä°õ¤òÍѰդ·¤Þ¤·¤¿¡£¤³¤³¤Ç¤âÆó½ÅÅÐÏ¿¤·¤Ê¤¤¤è¤¦¤Ë¤³¤ÎÍ×ÁǤθºß³Îǧ¤ò¹Ô¤¤¤Þ¤¹¡£
¹¹¤Ë¡ß°õ¤À¤±¤Ç¤Ï¥Þ¥¦¥¹¥«¡¼¥½¥ë¤ò¤½¤Î°ÌÃ֤˥ե£¥Ã¥È¤¹¤ë¼ê´Ö¤¬ÌÌÅݤʤΤǡ¢±£ÊÃ¥¯¥ê¥Ã¥¯¤ò¼õ¤±Æþ¤ì¤ë²Õ½ê¤òÅÀ¤«¤éÀþ¤Ë³ÈÄ¥¤·¤Æ¡¢¥¿¥¤¥È¥ë¥Ð¡¼·Á¼°¤Ë¤·¤Þ¤·¤¿¡£
¤³¤³Ëø¤Ç¥¢¥Ë¥á¡¼¥·¥ç¥ó¥Ý¥Ã¥×¥¢¥Ã¥×¤Î¤¿¤á¤Î½àÈ÷¤¬½ª¤ï¤ê¤Þ¤·¤¿¡£Ìü¡¹¡¢Æ°¤¤Î¤¢¤ë¥Ý¥Ã¥×¥¢¥Ã¥×ɽ¼¨¤ä±£ÊÃÁàºî¤Î¤¿¤á¤Î´Ø¿ô¤òÄêµÁ¤·¤Þ¤¹¡£
¤Þ¤ºÂè°ì°ú¿ô contents ¤¬Ì¤»ØÄê¤Î¾ì¹ç¤ÎÂбþ¤ò 132 ¹Ô¤Ç¹Ô¤¤¤Þ¤·¤¿¡£Ì¤»ØÄê¤Î¾ì¹ç¤Ë¤Ï½êÄê¤Îʸ¾Ï¡Ê || ¤Î±¦Â¦¤Îʸ¾Ï ¡Ë¤òÍѰդ·¤Æ¤ª¤¡¢¤³¤ì¤ò animetedPopup ´Ø¿ô¤ò»È¤Ã¤Æ¥Ý¥Ã¥×¥¢¥Ã¥×¤·¤Þ¤¹¡£
ʸ»úÎó¤ò¥Ý¥Ã¥×¥¢¥Ã¥×¤¹¤ë¾ì¹çÆÃ¤Ë¡¢¤½¤ÎÍ×ÁÇ¥µ¥¤¥º¤ò¡Öɽ¼¨Á°¤Ë¡×Ç¡²¿¤Ë¥Ö¥é¥¦¥¶¤ËÃΤ餻¤ë¤«¤¬²ÝÂê¤È¤Ê¤ê¤Þ¤¹¡£Ê¸»úÎó¤Îʸ»ú¿ô¤¬¸ÇÄꤵ¤ì¤Æ¤¤¤Æ¤â¡¢Ê¸»ú¤Î²£Éý¤Ï°ìÄê¤Ç¤Ï¤Ê¤¤¤Î¤ÇÆâÍÆ¤Ë¤è¤Ã¤Æ¤Ï¥µ¥¤¥º¤ÏÊѤï¤ê¤Þ¤¹¤·¡¢°ìÈ̤˥ݥåץ¢¥Ã¥×ɽ¼¨¤ò¹Ô¤¦Ê¸»úÎó¤ÏŤµ¤ÏÉÔÄꡦ²ÄÊѤǤ¹¡£¤½¤Î¤¿¤á¥Ö¥é¥¦¥¶¤Ï¡¢Éý¤¬»ØÄꤵ¤ì¤Æ¤¤¤Ê¤±¤ì¤Ðɽ¼¨Îΰè°ìÇÕ¤ÎÉý¤¬»ØÄꤵ¤ì¤¿¤â¤Î¤È¸«¤Ê¤·¡¢°¿¤¤¤ÏÍ×ÁǤÎÉý¤¬»ØÄꤵ¤ì¤Æ¤¤¤ë¾ì¹ç¤Ë¤Ï¤½¤ÎÉý¤ÇÍ×ÁǤòɽ¼¨¤·¤Þ¤¹¤¬¡¢¥Ö¥é¥¦¥¶¤Ï¤³¤ì¤é¤Î¤¤¤º¤ì¤Î¾ì¹ç¤Ë¤ª¤¤¤Æ¤â¡¢Í×ÁÇɽ¼¨Á°¤Ë¤Ï¤½¤ÎÍ×ÁǤι⤵¤òǧ¼±¤·¤Þ¤»¤ó¡£
Ê̤Υ¨¥ó¥È¥ê¥¤¤ÇÉÔÄê·¿¥Ü¥Ã¥¯¥¹¥µ¥¤¥º¤òɽ¼¨¤¹¤ëÁ°¤Ë¥Ö¥é¥¦¥¶¤Ëǧ¼±¤µ¤»¤ëÊýË¡¤Ë¤Ä¤¤¤Æ¾ÜºÙ¤Ë¿¨¤ì¤Þ¤·¤¿¤¬¡¢¤³¤Î¥×¥é¥°¥¤¥ó¤ÇºÎÍѤ·¤¿ÊýË¡¤Ï¡¢¼«Á°¤Ç¹Í°Æ¤·¤¿Æ©ÌÀ²½¤·¤Æ¥µ¥¤¥º¤ò¬Äꤹ¤ëÊýË¡¤Ç¤Ï¤Ê¤¯¡¢jquery.js ¤ÇÍøÍѤµ¤ì¤Æ¤¤¤ë visibility °À¤òÍøÍѤ¹¤ëÊýË¡¤òºÎÍѤ·¤Þ¤·¤¿¡£
jquery.js ¤ÇºÎÍѤ·¤Æ¤¤¤ëɽ¼¨Á°¥µ¥¤¥º·×¬ÊýË¡¤Ï¡¢1. position : absolute¡¢2. display : block¡¢3. visibility : hidden ¤È¤¹¤ë¤³¤È¤Ë¤è¤ê¡¢¡ÖÀäÂÐÇÛÃ֤Υ֥í¥Ã¥¯É½¼¨¾õÂ֤ˤ·¤Æ¤½¤ì¤òɽ¼¨¤µ¤»¤Ê¤¤¡×¾õÂÖ¤òºî¤ë¤â¤Î¤Ç¤¹¡£¡Êjquery.js¡§ css ´Ø¿ôÆâ¤Î #773 ¤Ç¸Æ¤Ó½Ð¤µ¤ì¤ë #735-748 ¤Î swap ´Ø¿ô¡Ë
¤Ê¤ª¡¢¤³¤Î¥×¥é¥°¥¤¥ó¤Ç¼ÂºÝ¤ËɬÍפȤʤë¤Î¤Ï outerHeight ¤È innerHeight ¤Ê¤Î¤Ç¤¹¤¬¡¢¤³¤ÎºÝ̵°ÕÌ£¤Ç¤¹¤¬£´¤Ä¤Î¥µ¥¤¥º¤ò¬Äꤷ¤Æ¤ª¤¯¤è¤¦¤Ë¤·¤Þ¤·¤¿¡Ê¶ì¾Ð¡Ë¡£
¤Þ¤¿innerHeight ¤Ë¤Ä¤¤¤Æ¤Ï¡¢ÂåÆþ¼°¤ò iH ¤Î¥×¥í¥Ñ¥Æ¥£ÃͤȤ¹¤ë¤³¤È¤Ë¤è¤ê¡¢Æ±»þ¤Ë 2 ¤Ä¤Î¥×¥í¥Ñ¥Æ¥£¤ËÃͤò¼èÆÀ¤µ¤»¤Þ¤·¤¿¡£
¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò±é½Ð¤¹¤ë¤¿¤á¤ËÉý¤È¹â¤µ¤¬¶Ë¾®¤Î¥¹¥¿¥¤¥ëÃͤòÀßÄꤷ¤Þ¤¹¡£¤³¤ì¤Ë¤è¤ê¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î»ÏÅÀ¤È½ªÅÀ¤Î°ÌÃÖ¤ÈÍ×ÁǤÎɽ¼¨¾õÂÖ¤ò¼èÆÀ¤·¤Þ¤¹¡£
¤Þ¤¿¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î»ÏÅÀ/½ªÅÀ¤ò¼èÆÀ¤¹¤ë¤¿¤á¤Ë¤Ï¡¢½Ä²£¤Î¥¹¥¯¥í¡¼¥ë¾õÂÖ¤ò Javascript ¥¤¥ó¥¿¡¼¥×¥ê¥¿¤Ëǧ¼±¤µ¤»¤Ê¤±¤ì¤Ð¤Ê¤ê¤Þ¤»¤ó¤«¤é¡¢¤³¤Î´Ø¿ôÆâ¤Ç¥¹¥¯¥í¡¼¥ëÃͤò¼èÆÀ¤·¤Þ¤¹¡Ê#145¡Ë¡£
¸å½Ò¤¹¤ë¤è¤¦¤Ë¡¢¥¯¥ê¥Ã¥¯»þ¤Î¥¤¥Ù¥ó¥È¥Ï¥ó¥É¥é¡¼Æâ¤«¤é¡¢shrinkCSS ´Ø¿ô¤ò¸Æ¤Ó½Ð¤·¤Æ¡¢¤½¤Î¤È¤¤Î¥¹¥¯¥í¡¼¥ëÃͤò¼èÆÀ¤·¤Þ¤¹¡£
¼¡¤Ë¤³¤Î´Ø¿ôÆâ¤«¤é #151 ¤Ç getPos ´Ø¿ô¤ò¸Æ¤Ó½Ð¤·¤Æ¤¤¤Þ¤¹¤¬¡¢¤³¤ì¤Ë¤è¤ê²èÌÌÆâ¤Îº¸±¦¾å²¼Ãæ¿´¤Î¤É¤Î°ÌÃÖ¤ËÇÛÃÖ¤¹¤ë¤«¡¢¤¢¤ë¤¤¤Ï¥Þ¥¦¥¹¥«¡¼¥½¥ë¤Î¶á˵¤ËÇÛÃÖ¤¹¤ë¤«¤ò³ÎÄꤷ¤Þ¤¹¡£
¥¨¥é¡¼¥Õ¥é¥°¤¬Î©¤Ã¤Æ¤¤¤ë¾ì¹ç¤Ë¤Ï¥³¡¼¥É¿Ê¹Ô¤ò»ß¤á¤Þ¤¹¡£¡Ê#147¡Ë
#153-156¤Ç right ¤ä bottom »ØÄꤵ¤ì¤¿¾ì¹ç¤Ë left ¤ä top ¤ËÊÑ´¹¤·¤Æ¤¤¤Þ¤¹¡£
right / bottom »ØÄꤵ¤ì¤¿Ãͤòleft / top ¤ËÊÑ´¹¤¹¤ë·×»»¼°¤Ï¡¢ºÇ¸å¤ÎºÇ¸å¤Þ¤Ç¶ìÏ«¤ò½Å¤Í¤Þ¤·¤¿¡£getPos ´Ø¿ô¤«¤é¤ÎÌá¤êÃͤϡ¢right / bottom »ØÄê¤Î¥Þ¥Þ¤Ç¤¹¤¬¡¢#153-156 ¤Ë¤ª¤¤¤Æ¤³¤ì¤é¤ò left / top ¤ËÊÑ´¹¤·¤Þ¤¹¡£¤³¤Î·ë²Ì shrinkCSS ´Ø¿ô¤«¤é¤ÎÌá¤êÃÍ¤Ï left / top ¤Î¤ß¤È¤Ê¤ê¤Þ¤¹¡£
¤³¤ì¤Ï¤¤¤ï¤ÐµÕ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ç¡¢animaElem ´Ø¿ô¤Çɽ¼¨¤·¤¿¥Ý¥Ã¥×¥¢¥Ã¥×¤ò½Ì¾®¤·¤Ê¤¬¤é±£Êä·¤Þ¤¹¡£ºÇ½é¤Ë¥³¥ó¥Æ¥ó¥Ä¤òºï½ü¤·¤Æ¤«¤é shrinkCSS ´Ø¿ô¤ò¤è¤Ó¤À¤·¡¢¤«¤Ä¤³¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òÂÔ¤Á¹ÔÎó¤ËÅÐÏ¿¤·¤Ê¤¤¤è¤¦ queue Ãͤò false ¤Ë¤·¤Þ¤¹¡£
¤Ê¤ª¡¢shrinkCSS ´Ø¿ô¤Ç¥¨¥é¡¼¤¬È¯À¸¤¹¤ë²ÄǽÀ¤¬¤¢¤ê¤Þ¤¹¤¬¡¢hideElem ´Ø¿ô¤Ï¡¢É¬¤ºanimaElem ´Ø¿ô¤¬Áö¹Ô¤·¤¿¸å¤Ë¤·¤«µ¯Æ°¤µ¤ì¤º¡¢animaElem ´Ø¿ôÆâ¤Ë¤ª¤¤¤Æ shrinkCSS ´Ø¿ô¤Ë¥¨¥é¡¼¤¬È¯À¸¤·¤¿¾ì¹ç¤Î½èÍý¤Ïµ½Ò¤µ¤ì¤Æ¤¤¤Þ¤¹¡£¥¨¥é¡¼È¯À¸»þ¤Ë¤Ï hideElem ´Ø¿ô¸Æ¤Ó½Ð¤·¤Þ¤ÇÅþ㤷¤Þ¤»¤ó¤Î¤Ç¡¢Åö³º´Ø¿ô¤Ç¤Ï¥¨¥é¡¼½èÍý¤òɬÍפȤ·¤Þ¤»¤ó¡£
¤³¤³¤Ç¤Ï¼¡¤Î¤è¤¦¤ÊÍÍ¡¹¤Ê½èÍý¤ò¹Ô¤Ã¤Æ¤¤¤Þ¤¹¡£1.ÅÐÏ¿¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Îºï½ü¤ÈÄä»ß¡Ê#165¡Ë¡¢2. ¤³¤Î´Ø¿ôÆâ¤Ç°ì²ó¤À¤± shrinkCSS ´Ø¿ô¤ò¸Æ¤Ó½Ð¤·¡¢·ë²Ì¤òÊÑ¿ô¤ËµÏ¿¡Ê#166¡Ë¡¢¤³¤ÎÊÖÃͤ¬¶õ¤Î¾ì¹ç¤Î½èÍý¡Ê#167¡Ë3.²èÌ̤«¤é¥Ý¥Ã¥×¥¢¥Ã¥×¤ò¤Ï¤ß½Ð¤µ¤»¤Ê¤¤½èÍý¡Ê#170-174¡Ë¡¢4.²èÌÌ¥»¥ó¥¿¡¼¤ËÇÛÃÖ¤¹¤ë¾ì¹ç¡¢¤¢¤ë¤¤¤Ï right / bottom ¤¬»ØÄꤵ¤ì¤¿¾ì¹ç¤Î¡¢¥Ý¥Ã¥×¥¢¥Ã¥×¥µ¥¤¥º¤Èɽ¼¨°ÌÃÖ¤ÎÄ´À°¡Ê#176-180¡Ë¡¢4.¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î»ÏÅÀÀßÄê¡Ê#184¡Ë¡¢5.¥¢¥Ë¥á¡¼¥·¥ç¥óɽ¼¨¡Ê#186-188¡Ë¡Ê¤³¤³¤Ç¤â±£ÊýèÍýƱÍͤËÂÔ¤Á¹ÔÎó¤Ë¤ÏÅÐÏ¿¤·¤Þ¤»¤ó¡£¡Ë¡¢¤½¤·¤Æ 6.¥Ý¥Ã¥×¥¢¥Ã¥×Áë¤Î±£Êåϥó¥É¥é¡¼¸Æ¤Ó½Ð¤·¤Ç¤¹¡Ê#190-192¡Ë¡£
¤³¤³¤Ç¤ÎÍ×ÅÀ¤Ï°Ê²¼¤ÎÅÀ¤Ç¤¹¡£
ºÇ¸å¤Î½èÍý¤Ç¤¹¡£Í×ÁÇ¥¿¥°¤Ø¤Î¥¯¥ê¥Ã¥¯¥¤¥Ù¥ó¥ÈÅÐÏ¿¤Ç¤Ï¡¢¥¨¥é¡¼È¯À¸»þ¤ËÅÐÏ¿ºÑ¤ß¥¯¥ê¥Ã¥¯¥¤¥Ù¥ó¥È¤òºï½ü¤¹¤ë¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£¤³¤³¤ÇºÇ½é¤Ë¤·¤ÆºÇ¸å¤Ç¤¹¤¬ errflag ÃͤòÍøÍѤ·¤Þ¤¹¡£
¥¤¥Ù¥ó¥È¥Ï¥ó¥É¥é¡¼Æâ¤Ç»ÈÍѤ·¤¿ $(this) ¤Ï click ¤¬ jQInst ¤Î¥á¥½¥Ã¥É¤Ç¤¹¤«¤é¡¢jQInst ¤ò»²¾È¤·¤Þ¤¹¡£
¡¡90¡ó¶á¤¤¥·¥§¥¢¤ò°®¤Ã¤Æ¤¤¤ë¥¤¥ó¥¿¡¼¥Í¥Ã¥È¥¨¥¯¥¹¥×¥í¡¼¥é¤ÎÉÁ²è¥¨¥ó¥¸¥ó¤òÍøÍѤ·¤¿¥¿¥Öbrowser¡£Âô»³¤Î¥¿¥Öbrowser¤¬¤¢¤ë¤¬¡¢Â¿µ¡Ç½¡¢¥«¥¹¥¿¥Þ¥¤¥º¥Õ¥ê¡¼¡¢¥¹¥¯¥ê¥×¥ÈÍøÍÑÅù¤Ç°ìÆü¤ÎŤ¬¤¢¤ë¡£Gekko¥¨¥ó¥¸¥ó¤Ø¤ÎÂбþ¤â¹Ô¤ï¤ì¡¢IE¤«¤é¤Î¼«Î©ÆÈΩ¤ÎÊý¸þ¤Ë¸þ¤«¤Ã¤Æ¤¤¤ë¡£2005ǯ7·î¤Ë¤ÏIE7¤¬Åо줹¤ë¸«Ä̤·¤ÎÃæ¤Ç¡¢º£¸å¤ÎȯŸ¤¬Ë¾¤Þ¤ì¤ë¡£
¡¡Â¿ÍͤÊCSSºîÀ®»Ù±çµ¡Ç½¤òÈ÷¤¨¤¿¡¢¥¿¥°ÆþÎϼ° HTML&CSSºîÀ®»Ù±ç¥¨¥Ç¥£¥¿¡£¥¹¥¥ó¥Ç¥¶¥¤¥ó¤â¤¹¤Ã¤¤ê¤·¤Æ¤¤¤ë¡£¥Æ¥¥¹¥È¥¨¥Ç¥£¥¿¡¼¾å¤ÇºîÀ®¤¹¤ë¤è¤ê¤â³Î¼Â¤Ç°ÂÁ´¤Ë¥¿¥°ÂǤÁ¤¬½ÐÍè¤ë¡£
ʸ»ú¥³¡¼¥É¤òÁª¤Ù¤Ê¤¤¤Î¤¬·çÅÀ¡£
¡¡StyleNoteƱÍͤΥ¿¥°ÆþÎϼ° HTML&CSS ºîÀ®»Ù±ç¥¨¥Ç¥£¥¿¡£Ä¹Ç¯»ÈÍѤ·¤Æ¤¤¿¤¬¸½ºßStyleNote¤Ë¾è¤ê´¹¤¨¤Ä¤Ä¤¢¤ë¡£
¡¡¥¯¥ê¥Ã¥×¥Ü¡¼¥ÉÍúÎò¾ðÊó¤ò³èÍѤ¹¤ë°Ù¤Î¥½¥Õ¥È¡£²èÁü¤Þ¤ÇÍúÎò¤ò¼è¤Ã¤Æ¤¯¤ì¤ë¤Î¤¬´ò¤·¤¤¡£¤³¤Î¥½¥Õ¥È¤ò»È¤ï¤Ê¤¤Æü¤ÏÀäÂФʤ¤Äø¤Ë½ÅÊõ¤·¡¢°¦ÍѤ·¤Æ¤¤¤ë¡£
¡¡µ¯Æ°Ãæ¤Î¥¦¥£¥ó¥É¥¦¤Î¡Ö¥³¥Ô¡¼¤Ç¤¤Ê¤¤¡×ÀâÌÀʸ¤Ê¤É¤Îʸ»úÎó¤ò¼èÆÀ¤·¡¢¥³¥Ô¡¼²Äǽ¤Êʸ»ú¥Ç¡¼¥¿¤Ë¤¹¤ë¥Ä¡¼¥ë¡£²¿¤«¤ÈÊØÍø¡£
¡¡¥¹¥È¥ê¡¼¥ß¥ó¥°¥Ç¡¼¥¿¤òÊݸ¤¹¤ë¤³¤È¤¬½ÐÍè¤ë¥½¥Õ¥È¡£Æ°²èÍøÍѤˤÏÉԲķç¤Ê¥½¥Õ¥È¤À¡£
¡¡ÌµÎÁ¤Ê¤¬¤é¥ì¥¤¥ä¡¼µ¡Ç½¤òͤ·¡¢¥¹¥¯¥ê¥×¥È¤Ë¤è¤ë³ÈÄ¥¤â²Äǽ¤Ê¡¢sleipnirºî¼Ô¤¬Ä󶡤·¤Æ¤¤¤ëÍ¥¤ì¤â¤Î²èÁüÊÔ½¸¥½¥Õ¥È¡£
¡¡²èÌÌ¥¥ã¥×¥Á¥ã¥½¥Õ¥È¤È¸À¤¨¤Ð¤³¤ì¤Ë¾¡¤ë¤â¤Î¤Ê¤·¡¢¤Ç¤Ï¤Ê¤¤¤À¤í¤¦¤«¡©¡¡ÍÍ¡¹¤Ê¼èÆÀÊýË¡¤òͤ·¤Æ¤ª¤ê¡¢¥Ö¥í¥°ºîÀ®¤Ë¤âHomepageºîÀ®¤ËÉԲķç¤À¡£Jtrim¤Èʤó¤ÇWoodyBells¤ÎºîÉÊ¡£
¡¡Ê£¿ô¥Õ¥¡¥¤¥ë¤ÎƱ»þÊÔ½¸¤Ï½ÐÍè¤Ê¤¤¤¬¡¢Æ©²ápng¤âºî¤ì¤ë²èÁüÊÔ½¸¥½¥Õ¥È¡£
¡Ê°Ê²¼Åö³º¥µ¥¤¥È¤«¤éÈ´¿è¡Ë½é¿´¼Ô¤Ë¤â´Êñ¤ËÁàºî¤¬½ÐÍè¤ë¥Õ¥©¥È¥ì¥¿¥Ã¥Á¥½¥Õ¥È¤Ç¤¹¡£Â¿¤¯¤Î²Ã¹©µ¡Ç½¤Ç²èÁü¤ËÍÍ¡¹¤Ê¸ú²Ì¤òÍ¿¤¨¤ë¤³¤È¤¬¤Ç¤¤Þ¤¹¡£Èó¾ï¤Ë·Ú²÷¤Ëưºî¤¹¤ë¤¿¤á¡¢¥¹¥È¥ì¥¹¤Ê¤¯Áàºî¤Ç¤¤Þ¤¹¡£
¡¡Animation Gif¥Õ¥¡¥¤¥ë¤òºî¤ì¤ë̵ÎÁ¥½¥Õ¥È¡£
¡¡¥¥ã¥×¥Á¥ã¥½¥Õ¥È¡£²èÌÌÆâ¤Ë¥µ¥¤¥ÈÁ´ÂΤ¬É½¼¨¤·¤¤ì¤Ê¤¤¾ì¹ç¤Ç¤â¡¢¤³¤ì¤ò»È¤¨¤ÐÁ´ÂΤò¥¥ã¥×¥Á¥ã¤¹¤ë¤³¤È¤¬½ÐÍè¤ë¡£
¡¡²èÁü½èÍý¡£²èÁü¤Î¥Õ¥©¡¼¥Þ¥Ã¥ÈÊÑ´¹¤Î¤ß¤Ê¤é¤º¡¢¿§¿ô¤ä¥µ¥¤¥º¡¢°µ½ÌΨ¤ÎÊѹ¹¤Þ¤Ç°ì³ç½èÍý¤Ç¤¤Æ¤·¤Þ¤¦¡ØBatchGOO!¡Ù¤Ï¡¢ÂçÎ̤βèÁü¤ò¤Þ¤È¤á¤Æ½èÍý¤·¤¿¤¤¤È¤¤ËÂçÊÑÊØÍø¤Ê¥½¥Õ¥È¡£BMP, TIFF, JPEG, PCX, PNG ¤ÎÁê¸ßÊÑ´¹¤ò¤Ï¤¸¤á¡¢¿§¿ô¡¦¥µ¥¤¥º¡¦²òÁüÅÙ¤ÎÅý°ì¡¢JPEG°µ½ÌΨ¤ÎÄ´Àá¤Ê¤É¡¢¥Û¡¼¥à¥Ú¡¼¥¸ÍѤβèÁü¤ä·ÈÂÓÅÅÏÃÍѤÎÊÉ»æ¤ò·¤¨¤ë¤Î¤ËÈ´·²¤ÎÁêÀ¤ò¸«¤»¤ë¡£¡ÊVector¤ÎÅö³º¥½¥Õ¥È¾Ò²ðÊǤè¤êÈ´¿è°úÍÑ¡Ë
¡¡Ì¾Á°¤«¤éľ¤°¤ËÁÛÁü¤¬ÉÕ¤¯¤è¤¦¤Ë²èÁü¤Î¥µ¥¤¥º¤ò¬¤ë¤¿¤á¤Î¥½¥Õ¥È¤À¡£HomepageºîÀ®¤Ë¤Ï·ç¤«¤»¤Ê¤¤¡£2¥«¥é¥à¡¢3¥«¥é¥à¤Î¥ì¥¤¥¢¥¦¥È¤ò¹Ô¤¦¾ì¹ç¤ËÂçÊѽÅÊõ¤¹¤ë¡£
¡¡¥é¥ó¥Á¥ã¡¼¥½¥Õ¥È¤ÏÂô»³¤¢¤ë¤¬¡¢Ãæ¤Ç¤â¤³¤ì¤¬°ì²¡¤·¤À¡££²Ç¯°Ê¾å»È¤Ã¤Æ¤¤¿¤¬¤½¤ÎÁàºîÀ¤Ë¤ÏËèÆüËþ¤·¤Æ¤¤¤ë¡£¤³¤ì¤ò»È¤¤»Ï¤á¤Æ¤«¤é¥Ç¥¹¥¯¥È¥Ã¥×¤Ë¤Ï°ìÀڤΥ¢¥¤¥³¥ó¤òɽ¼¨¤¹¤ë¤³¤È¤ò¤ä¤á¤Æ¤·¤Þ¤Ã¤¿¡£
¡¡AdobeReader7¤Ë¤è¤Ã¤Æ¡¢µ¯Æ°»þ´Ö¤¬Ä¹¤¹¤®¤ë¤È¤¤¤¦Ä¹Ç¯¤Î¥æ¡¼¥¶¡¼¤ÎÉÔËþ¤Ï¤¢¤ëÄøÅÙ²ò¾Ã¤·¤¿¡£¤½¤Î¤¿¤á¤³¤Î¹â®²½¥½¥Õ¥È¤Ï¸ºß²ÁÃͤ¬Äã²¼¤·¤Æ¤·¤Þ¤Ã¤¿¤«¤â¤·¤ì¤Ê¤¤¡£AdobeReader6Ëø¤Ï¤³¤Î¥½¥Õ¥È¤Ë¤è¤ëµ¯Æ°¹â®²½¤Ç²¸·Ã¤ò¼õ¤±¤Æ¤¤¿¡£
¡¡IEÀìÍѤ¬ÆñÅÀ¤À¤¬¡¢ÍÍ¡¹¤Ê¥µ¥¤¥ÈÆâ¤ÇID¤ä¥Ñ¥¹¥ï¡¼¥É¤òÆþÎϤ¹¤ë¤Î¤Ë½ÅÊõ¤¹¤ë¥½¥Õ¥È¡£¥³¥ó¥Æ¥¥¹¥È¥á¥Ë¥å¡¼¤«¤é´Êñ¤Ëµ¯Æ°¤Ç¤¤ë¤Î¤¬Good¡ª¡¡sleipnirÅù¤ÎIE¤ÎÉÁ²è¥¨¥ó¥¸¥ó¤òÍøÍѤ·¤Æ¤¤¤ë¥Ö¥é¥¦¥¶¤Ç¤â»È¤¨¤ë¡£
¡¡ÍøÍѤ·¤Æ¤¤¤ë¥Ñ¥½¥³¥ó¤Î½ô¸µÃͤò¼èÆÀ¤¹¤ë¤Ë¤Ï¡¢¤³¤Î¥½¥Õ¥È¤¬¥Ù¥¹¥È¤À¡£¥¤¥ó¥¹¥È¡¼¥ëºÑ¤ß¥½¥Õ¥È¤Î°ìÍ÷¤¬¼èÆÀ¤Ç¤¤ë¤Î¤â´ò¤·¤¤¡£
¡¡WMP¤Ïµ¡Ç½¤¬ËÉ٤ʤÀ¤±½Å¤¤¡£RealPlayer¤âƱÍͤÀ¡£¤½¤³¤ÇMedia Player Classic¤ò»È¤¤¤¿¤¤¡£Æ°ºî¤¬·Ú²÷¤Ê¤À¤±¤Ç¤Ï¤Ê¤¯¡¢Âбþ¤·¤Æ¤¤¤ë¥Õ¥¡¥¤¥ë·Á¼°¤â¤¹¤³¤Ö¤ë¿¤¯¡¢¤³¤ì¤Ò¤È¤Ä¤Ç¡¢wmv¤ârm¤âɽ¼¨¤Ç¤¤Æ¤·¤Þ¤¦¤Î¤À¤«¤éÀ¨¤¤¡ª ¿ô¿¤¢¤ëMedia Player¤Î²¦ÍͤȸÀ¤¨¤ë¤À¤í¤¦¡£
¡¡¼«Âð¤ÇPC¤òµ¯Æ°¤·¤Æ¤¤¤ë¤È¤¤Ë¤Ïɬ¤ºµ¯Æ°¤·¤Æ¤¤¤ë¥á¥Ç¥£¥¢¥×¥ì¡¼¥ä¡¼¡£²¿¤«¤È²á¾ê¤ÊWinamp¤è¤ê¤â¡¢µ¯Æ°¤â®¤¯¥¹¥¥ó¤Ï¥·¥ó¥×¥ë¤À¡£
¡¡DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, ¤Ê¤É¤Îư²è¤òDVD-Video·Á¼°¤ËÊÑ´¹¤Ç¤¤ë¥Õ¥ê¡¼¥½¥Õ¥È¡£¥¯¥ê¥Ã¥¯¤¹¤ë¤ÈDVD´ØÏ¢¥½¥Õ¥È¾Ò²ð¥µ¥¤¥È¡á¡ÖDVD¤ÊTool¤¿¤Á¡×¤Ê¤ëHomepage¤¬³«¤¤Þ¤¹¡£