javascript - 在这个 JavaScript 函数中显示淡入效果？

Question

我有这个功能，可以在页面加载时显示加载图像:

<script>
function onReady(callback) {
    var intervalID = window.setInterval(checkReady, 1000);

    function checkReady() {
        if (document.getElementsByTagName('body')[0] !== undefined) {
            window.clearInterval(intervalID);
            callback.call(this);
        }
    }
}

function show(id, value) {
    document.getElementById(id).style.display = value ? 'block' : 'none';
}

onReady(function () {
    show('all', true);
    show('loading', false);
});
</script>

jsfiddle

我想要做的是添加淡入效果以在加载完成时显示 div #all。

我可以在function show中添加淡入效果吗？我可以使用jquery吗？有什么想法吗？

Answer 1

您可以使用以下 JavaScript 函数来实现淡入和淡出效果。 CREDIT

    function fadeIn(el, display) {
    el.style.opacity = 0;
    el.style.display = display || "block";

    (function fade() {
        var val = parseFloat(el.style.opacity);
        if (!((val += .01) > 1)) {
            el.style.opacity = val;
            requestAnimationFrame(fade);
        }
    })();
}

function fadeOut(el) {
    el.style.opacity = 1;

    (function fade() {
        if ((el.style.opacity -= .01) < 0) {
            el.style.display = "none";
        } else {
            requestAnimationFrame(fade);
        }
    })();
}

并将您的显示功能更改为以下。

function show(id, value) {
    var el = document.getElementById(id);
    if(value)
        fadeIn(el)
    else 
        fadeOut(el);
}

UPDATED FIDDLE