在此 JavaScript 函数中显示淡入淡出效果

show a fadeIn effect in this javascript function?

本文关键字：淡出 淡入 显示 JavaScript 函数 在此      更新时间：2023-09-26

我有这个函数，可以在页面加载时显示一个加载图像：

<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>

斯菲德尔

我想做的是添加一个 fadeIn 效果，以在加载完成时显示div #all。

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

您可以使用 javascript 使用以下内容来实现淡入和淡出效果。信用

    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);
}

更新的小提琴

你可以使用 jQuery 的 fadeIn 方法。 

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

https://jsfiddle.net/az9uaspr/

把它放在你的"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();
 }
相关文章：