Question

我有这个功能，当页面加载时会显示一个LOADING图像：

<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

我想要做的是添加一个fadeIn效果来显示div #all WHEN LOADING完成。

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

Answer 1

您可以使用以下功能进行淡入＆amp;使用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

Answer 2

您可以使用jQuery的fadeIn方法。例如

function show(id, value) {
    if(value){
        $("#" + id).fadeIn(2000);
    } else{
        $('#' +id).hide();
    }
}

https://jsfiddle.net/az9uaspr/

Answer 3

将它放在“head”标签中：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

只需改变你的节目（）： -

  function show(id, value) {

if(value)
  $("#"+id).fadeIn("2000");
else
  $("#"+id).hide();
 }

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

3 个答案:

UPDATED FIDDLE