将fadeIn（）和fadeOut（）实施为事后函数

Question

Disclamer：这可能是一个愚蠢的问题，因为我是Java新手，甚至是jQuery新手。抱歉，如果有任何编码“ faux pas”，或者如果您对我的所作所为感到头晕，：）

我正在做一个页面，只是在树莓派上做一个售货亭，以便在我的教堂的视频屏幕上显示宣教士的来信。到目前为止，我已经使用老式Javascript为这些字母制作了幻灯片，并使用three.js为3D地球动画了。除了我要淡入和淡出字母之外，其他所有东西似乎都运行良好。

到目前为止，我已通过以下方式更改了传教士之间的图像不透明度：>

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

document.getElementById("letter").style="opacity:0%;
但是，我希望图像褪色而不是突然出现或消失。我对jQuery的了解比对Java的了解还多，但是有没有一种方法可以简单地实现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.

Disclamer：这可能是一个愚蠢的问题，因为我是Java的新手，甚至是jQuery的新手。抱歉，如果有任何编码“ faux pas”，或者如果您对我所做的工作感到头晕，:)我正在努力...

Answer 1

是的，您可以像下面这样简单地使用JQuery的fadeIn（）和fadeOut（）：