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

Disclamer: This is probably a dumb question as I'm new to Javascript and even newer to jQuery. Sorry if there are any coding "faux pas" or if you get dizzy reading what I've done :)

I am working on a page to simply be a kiosk on a raspberry pi to display missionary letters at my church on a video screen. So far, I have made a slide show for the letters using old-fashioned Javascript and animated a 3D globe using three.js. It all seems to be working well except I want to fade the letters in and out.

So far, I have changed the image opacity between missionaries by

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

or

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

However, I am wanting the image to fade instead of appearing or disappearing suddenly. I am even more new to jQuery than I am to Javascript, but is there a way to simply implement jQuery's fadeIn() and fadeOut() without having to rewrite everything I've done to this point?

A more detailed inclusion of this section of my javascript is listed below. Thanks so much in advance for any advice you've got!

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) {var 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.