事后将 fadeIn() 和 fadeOut() 实现到函数中

Question

免责声明：这可能是一个愚蠢的问题，因为我是 Javascript 的新手，甚至是 jQuery 的新手。抱歉，如果有任何编码 "faux pas" 或者如果您阅读我所做的内容感到头晕:)

我正在开发一个页面，它只是 raspberry pi 上的一个信息亭，用于在视频屏幕上显示我教会的传教士信件。到目前为止，我已经使用老式 Javascript 制作了字母幻灯片，并使用 three.js 制作了 3D 地球仪动画。这一切似乎都运作良好，除了我想淡入和淡出字母。

到目前为止，我已经将传教士之间的图像不透明度更改为

document.getElementById("letter").style="opacity:100%;

或

document.getElementById("letter").style="opacity:0%;

但是，我希望图像淡出而不是突然出现或消失。我对 jQuery 比对 Javascript 更陌生，但是有没有一种方法可以简单地实现 jQuery 的 fadeIn() 和 fadeOut() 而不必重写我到目前为止所做的一切？

下面列出了我的 javascript 这一部分的更详细内容。非常感谢您的任何建议！

var currentSlide = 0;
var slideInterval = setInterval(nextSlide,timePerLetter);
function nextSlide() {
    currentSlide = (currentSlide+1)%misInfo.length;
    locationCorrection (misInfo[currentSlide][4], misInfo[currentSlide][5]);
    translate(newX, newY);
//the two lines above are related to rotating the globe I rendered with three.js
    letterGone ();
    setTimeout (missionaryletterdisplay, 750);    
}
function letterGone () {
    document.getElementById("letter").style="opacity:0%;";
}
function missionaryletterdisplay () {

    document.getElementById("letter").src="letters/"+misInfo[currentSlide][0]+""+misInfo[currentSlide][2]+".jpg";
    setTimeout (fadeInLetter, 200);
    var letterloctester = Math.pow(-1, currentSlide);
    var letterrightleft = "right";
    if (letterloctester >=0) {
        letterrightleft="right";
    } else {
        var letterrightleft="left";
    }
    function fadeInLetter() {
    document.getElementById("letter").style="opacity:100%;"+letterrightleft+":7.5%;";
    };
    setTimeout (fadeInLetter, 50);
}
//The whole "rightleft" stuff above moves the letter to either the right side of the screen or the left depending on i so that the letter and globe switch between missionaries.

Answer 1

是的，您可以简单地使用 JQuery 的 fadeIn() 和 fadeOut()，如下所示：

function letterGone () {
    $("#letter").fadeOut();
}

function missionaryletterdisplay () {
        $("#letter")attr("src", "letters/"+misInfo[currentSlide][0]+""+misInfo[currentSlide][2]+".jpg");

        var letterloctester = Math.pow(-1, currentSlide);
        var letterrightleft = "right";
        if (letterloctester >=0) {
           var letterrightleft="right";
        } else {
           var letterrightleft="left";
        };

        $("#letter").css(letterrightleft,"7.5%");
        $("#letter").fadeIn();
}

Answer 2

感谢@darkmatter。做到了！我基本上决定放弃使用 jQuery 并改用 CSS 转换。具体来说，这让我到达了那里......。

我最后在 css 中添加了以下内容：

        #letter {
            z-index:2;
            width:35%;
            height:90%;
            position: absolute;
            top:5%;
            opacity:1;
            transition: opacity 0.5s;
        }
        #letter.fade {
            opacity:0;
        }

我把它放在我的 javascript 中（也进行了一些清理）：

function missionaryletterdisplay () {
        var letterloctester = Math.pow(-1, currentSlide);
        var letterrightleftbefore;
        var letterrightleftafter;
        var letterNow = document.getElementById("letter")
        if (letterloctester >=0) {var letterrightleftbefore="right";var letterrightleftafter="left"; } else {var letterrightleftbefore="left";letterrightleftafter="right";};
        function letterGone() {
            letterNow.style=letterrightleftafter+":7.5%;";
            letterNow.classList.toggle('fade');
        }
        letterGone ();
        function letterThere () {
        letterNow.src="letters/"+misInfo[currentSlide][0]+""+misInfo[currentSlide][2]+".jpg";
        setTimeout (fadeInLetter, 200);
        function fadeInLetter() {
                      letterNow.style=letterrightleftbefore+":7.5%;";};
                        letterNow.classList.toggle('fade');
        setTimeout (fadeInLetter, 50);}
        setTimeout (letterThere, 750);
    }

事后将 fadeIn() 和 fadeOut() 实现到函数中

Implementing fadeIn() and fadeOut() into a function after-the-fact

javascript

jquery

function

fadeout

fadein