WordPressµ¼º½²Ëµ¥µÄ¹ö¶¯ºÍµ­Èëµ­³öЧ¹ûµÄʵÏÖÒªµã

¹o¶¯µ¼º½²Ëµ¥
¹o¶¯²Ëµ¥, ¹ËÃu˼ÒaÊÇÒÔ¹o¶¯µÄ½Ê½ÏÔʾºÍÒþ²Ø²Ëµ¥µÄ. Æaʵ¸uµ­Èeµ­³o²Ëµ¥ºÍ¹o¶¯²Ëµ¥µÄÔ­ÀiÊÇÒ»ÑuµÄ, Ç°ÕßÊÇÔÚ´¥¢Ê¼þµÄʱºo¸Ä±a²Ëµ¥µÄ͸Ã÷¶È, ¶øºoÕßÔoÊǸıa²Ëµ¥µÄ¸ß¶È. ÄÇΪʲôºoÕߵĴ¦ÀiÄѶȻa±ÈÇ°Õ߸ßÄØ? ÕaÕýÒoΪ²Ëµ¥¸ß¶ÈµÄ´¦Ài±È͸Ã÷¶ÈÓиu¸ßµÄ¼¼ÇÉÒªÇo. ÏÂÃaeÎÒÃǾÍÌÖÂÛһϸÃÈçºÎ´¦Ài, ²¢ÄÑÔÚʲôµØ*½.

³oÆÚ»¯´¦Ài
ΪÁË´¦Ài¸u¼ÓÁe»i, ÎÒÃÇÐeҪΪËu¶¨ÒaÒ»¸o×÷Ϊ²ÎÊýµÄ»¬¶¯ËÙ¶È, Ò²¾ÍÊÇÿһ¸oµ¥Î»Ê±¼a¼a¸o, ²Ëµ¥¸ß¶ÈµÄ¸Ä±a*u¶È. ÁiÍa, ÎÒÃÇÐeÒª½«²Ëµ¥µÄ³oʼ¸ß¶È¶¨Îª 0.

    // ËÙ¶ÈÀ´×Ô²ÎÊý, ĬÈÏû¸oʱ¼aµ¥Î»Òƶ¯ 10px
    this.speed = speed || 10;
    // Ée¶¨³oʼ»¯¸ß¶È
    this.util.setStyle(this.body, 'height', '0');

Õ¹¿ªºÍÕÛµþ
Õ¹¿ªºÍÕÛµþµÄ½¨¶ÔÓ¦µ­Èeµ­³o²Ëµ¥µÄ¼ÓÇ¿ºÍ¼oС²»Í¸Ã÷¶È, Ö»ÊÇ´¦Ài¶ÔÏo²»Ò»Ñu, Ô­ÀiÊÇÒ»ÑuµÄ. ҪעÒa½«»ñÈ¡µÄ¸ß¶ÈתΪÕuÐÍÔÙ½øÐмÆËa.

    expand: function() {
     // »ñÈ¡µ±Ç°¸ß¶È, ²¢ÕuÐÍ»¯
     var height = parseInt(this.util.getStyle(this.body, 'height'));
     // ÔÚʱ¼aµ¥Î»ÄÚ¼ÓÉÏËÙ¶È, Ö±µ½¸ß¶ÈµÈÓÚ»o³¬¹ý×i´o¸ß¶È
     height += this.speed;
     if(height >= this.height) {
     height = this.height;
     // È¡ÏuÑ­»*µ÷ÓÃ
     clearTimeout(this.tid);
     }
     // ÖØÐÂÉe¶¨²Ëµ¥¸ß¶È
     this.util.setStyle(this.body, 'height', height + 'px');
    }

    /**
     * ÕÛµþ²Ëµ¥, Ö±µ½¸ß¶ÈΪ 1 ʱÒþ²Ø²Ëµ¥
     */
    collapse:function() {
     // »ñÈ¡µ±Ç°¸ß¶È, ²¢ÕuÐÍ»¯
     var height = parseInt(this.util.getStyle(this.body, 'height'));
     // ÔÚʱ¼aµ¥Î»ÄÚ¼oÈ¥ËÙ¶È, Ö±µ½¸ß¶ÈµÈÓÚ»oСÓÚ 1
     height -= this.speed;
     if(height <= 1) {
     height = 1;
     // Òþ²Ø²Ëµ¥
     this.util.setStyle(this.body, 'visibility', 'hidden');
     // È¡ÏuÑ­»*µ÷ÓÃ
     clearTimeout(this.tid);
     }
     // ÖØÐÂÉe¶¨²Ëµ¥¸ß¶È
     this.util.setStyle(this.body, 'height', height + 'px');
    }

¼¤»i²Ëµ¥µÄ˲¼a
Ê®ÖÊ®ÖÊ®ÖÖØÒª, ¹o¶¯²Ëµ¥ÖÐ×i¾ß¼¼ÇÉ, Ò²×iÓÐÒa˼µÄÒ»²¿Ö.
±¾³ÌÐoÖÐ, ÎÒ¶Ô»ñÈ¡¸ß¶ÈµÄ½¨½øÐÐÁËa×°, »ñÈ¡¸ß¶ÈÆaʵÊǵ»ØÔªËØµÄ offsetHeight. °´ÎÒµÄÀi½a (²»ÖªµÀÊÇñÕýÈ), offsetHeight »aÓÅÏÈÈ¥»ñÈ¡ CSS ÑuʽÖеĸ߶Ȳ¢*µ»Ø, µ±ÑuʽΪ¿Õʱ²Å»aÈ¥»ñÈ¡ÔªËصÄʵ¼Ê¸ß¶È. ËuÒÔÓÐÒÔÏ´uÂe:

    // »ñµÃ³oʼ¸ß¶È, µ±Êo±eÔڲ˵¥±eÌaÉÏʱ»ñµÃÕ¹¿ªÊ±µÄ³oʼ¸ß¶È, µ±Êo±eÔڲ˵¥ÌaÉÏʱȡµÃ²Ëµ¥µÄʵ¼Ê¸ß¶È
    var initHeight = this.util.getStyle(this.body, 'height');
    // »ñµÃʵ¼Ê¸ß¶È, ±ØÐeÏÈÇa¿ÕÑuʽµÄ¸ß¶È, *ñÔoÖ»»aµÃµ½ÑuʽÖеĸ߶È
    this.util.setStyle(this.body, 'height', '');
    this.height = this.util.getHeight(this.body);
    // ÖØÐÂÉe¶¨³oʼ¸ß¶È
    this.util.setStyle(this.body, 'height', initHeight);

µ­³oµ­Èeµ¼º½²Ëµ¥
ʵÊ(C)²Ù×÷

Ç°ÃaeµÄÖÎo˵µÃÓеa†ªaÂÁË, »¹ÊÇ¿´¿´´uÂe°É. :) ΪÁËÍ»³o¸Ä¶¯µÄ²¿Ö, ÎÒÔÚ´uÂeÖмÓÈeÁËÒ»Ð(C) Log.

³oʼ»¯
³oʼ²»Í¸Ã÷¶ÈΪ 0, ¶ø×i´o²»Í¸Ã÷¶ÈΪ±»Ée¶¨Öµ»oÕß 1.

    // ¶¨Òa͸Ã÷¶È, ĬÈÏ͸Ã÷
    this.opacity = 0;
    this.maxopacity = opacity || 1;

¼¤»i
ÏȽøÐÐÇ°ÆÚ´¦Ài, ÔٶԲ˵¥µÄ͸Ã÷¶È½øÐд¦Ài.

    /**
     * ¼¤»i*½*¨
     * µ±Êo±eÒƶ¯µ½²Ëµ¥±eÌaÊǼ¤»i
     */
    activate: function() {
     // »ñÈ¡µ±Ç°²Ëµ¥ÌaµÄλÖÃ
     var pos = this.util.cumulativeOffset(this.title);
     var left = pos[0];
     var top = pos[1] + this.util.getHeight(this.title);

     // ¶¨Òa¼¤»iʱÑuʽ
     this.util.setStyle(this.body, 'left', left + 'px');
     this.util.setStyle(this.body, 'top', top + 'px');
     this.util.setStyle(this.body, 'visibility', 'visible');
     this.util.setStyle(this.body, 'opacity', this.opacity);
     this.util.setStyle(this.body, 'filter', 'alpha(opacity=' + this.opacity * 100 + ')');

     if(this.tid) {
     clearTimeout(this.tid);
     }
     // ²»¶Ï¼ÓÇ¿²Ëµ¥µÄ²»Í¸Ã÷¶È
     this.tid = setInterval(this.util.bind(this, this.appear), 30);
    }

¼ÓÇ¿²Ëµ¥µÄ²»Í¸Ã÷¶È, Ö±µ½Í¸Ã÷¶Èµ½´i×i´o²»Í¸Ã÷¶È.

    /**
     * ¼ÓÇ¿²»Í¸Ã÷¶È, Ö±µ½×i´o²»Í¸Ã÷¶È
     */
    appear: function() {
     this.opacity += 0.1;
     if(this.opacity >= this.maxopacity) {
     this.opacity = this.maxopacity;
     // È¡ÏuÑ­»*µ÷ÓÃ
     clearTimeout(this.tid);
     }
     // ÖØÐÂÉe¶¨Í¸Ã÷¶È
     this.util.setStyle(this.body, 'opacity', this.opacity);
     this.util.setStyle(this.body, 'filter', 'alpha(opacity=' + this.opacity * 100 + ')');
    }

½a³ý
¶Ô²Ëµ¥µÄ͸Ã÷¶È½øÐд¦Ài.

    /**
     * ½a³ý*½*¨
     * µ±Êo±eÒƶ¯³o²Ëµ¥±eÌaÊǼ¤»i
     */
    deactivate: function(){
     if(this.tid) {
     clearTimeout(this.tid);
     }
     // ²»¶Ï¼oÈo²Ëµ¥µÄ²»Í¸Ã÷¶È
     this.tid = setInterval(this.util.bind(this, this.fade), 30);
    }

¼oÈo²Ëµ¥µÄ²»Í¸Ã÷¶È, Ö±µ½Í¸Ã÷¶ÈΪ 0 ²¢Òþ²Ø²Ëµ¥.

    /**
     * ¼oС²»Í¸Ã÷¶È, Ö±µ½Íeȫ͸Ã÷Òþ²Ø²Ëµ¥
     */
    fade:function() {
     this.opacity -= 0.1;
     if(this.opacity <= 0) {
     this.opacity = 0;
     // Òþ²Ø²Ëµ¥
     this.util.setStyle(this.body, 'visibility', 'hidden');
     // È¡ÏuÑ­»*µ÷ÓÃ
     clearTimeout(this.tid);
     }
     // ÖØÐÂÉe¶¨Í¸Ã÷¶È
     this.util.setStyle(this.body, 'opacity', this.opacity);
     this.util.setStyle(this.body, 'filter', 'alpha(opacity=' + this.opacity * 100 + ')');
    }