javascript - 如何使隐藏/显示文本 javascript 更流畅？

Question

我正在使用此脚本来隐藏和显示文本，但是，我想让过渡更顺畅，但我不确定该怎么做。这是它的演示:http://jsfiddle.net/LnE5U/ .

请帮我改一下，让它更流畅。

<a href="javascript:showOrHide();">hide/show text</a>
<div id="showOrHideDiv" style="display: none">hidden text</div>


<script language="javascript">
    function showOrHide() 
    {
        var div = document.getElementById("showOrHideDiv");
        if (div.style.display == "block") 
        {
            div.style.display = "none";
        }
        else 
        {
            div.style.display = "block";
        }
    } 
</script>

Answer 1

这是一个使用 jQuery 的示例 fadeToggle (更复杂的 animate 的快捷方式)

// assuming jQuery
$(function () {                      // on document ready
    var div = $('#showOrHideDiv');   // cache <div>
    $('#action').click(function () { // on click on the `<a>`
        div.fadeToggle(1000);        // toggle div visibility over 1 second
    });
});

HTML

<a id="action" href="#">hide/show text</a>
<div id="showOrHideDiv" style="display: none;">hidden text</div>

DEMO

---

一个纯 JavaScript 推子的例子。它看起来很复杂，因为我写它是为了支持在淡入淡出中改变方向和持续时间。不过，我确信仍然可以对其进行改进。

function generateFader(elem) {
    var t = null, goal, current = 0, inProgress = 0;
    if (!elem || elem.nodeType !== 1) throw new TypeError('Expecting input of Element');
    function visible(e) {
        var s = window.getComputedStyle(e);
        return +!(s.display === 'none' || s.opacity === '0');
    }
    function fader(duration) {
        var step, aStep, fn, thisID = ++current, vis = visible(elem);
        window.clearTimeout(t);
        if (inProgress) goal = 1 - goal; // reverse direction if there is one running
        else goal = 1 - vis;             // else decide direction
        if (goal) {                      // make sure visibility settings correct if hidden
            if (!vis) elem.style.opacity = '0';
            elem.style.display = 'block';
        }
        step = goal - +window.getComputedStyle(elem).opacity;
        step = 20 * step / duration;     // calculate how much to change by every 20ms
        if (step >= 0) {                 // prevent rounding issues
            if (step < 0.0001) step = 0.0001;
        } else if (step > -0.0001) step = -0.0001;
        aStep = Math.abs(step);          // cache
        fn = function () {
            // console.log(step, goal, thisID, current); // debug here
            var o = +window.getComputedStyle(elem).opacity;
            if (thisID !== current) return;
            if (Math.abs(goal - o) < aStep) {            // finished
                elem.style.opacity = goal;
                if (!goal) elem.style.display = 'none';
                inProgress = 0;
                return;
            }
            elem.style.opacity = (o + step).toFixed(5);
            t = window.setTimeout(fn, 20);
        }
        inProgress = 1; // mark started
        fn();           // start
    }
    return fader;
}

并使用它

window.addEventListener( // this section matches the code above
    'load',
    function () {
        var fader = generateFader(document.getElementById('showOrHideDiv'));
        document.getElementById('action').addEventListener(
            'click',
            function () {
                fader(1000);
            }
        );
    }
);

DEMO of this