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

Question

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

If you don't mind using css, this post can help https://stackoverflow.com/questions/30125705/css-how-to-make-an-element-fade-in-and-then-fade-out — Dark Matter, Jan 13 '20 at 23:04

score 0 · Answer 1 · answered Jan 13 '20 at 23:33

0

Yes you can simply use JQuery's fadeIn() and fadeOut() like below:

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

answered Jan 13 '20 at 23:33

Nawed Khan

4,393
1
10
22

Well, I'm now getting the following error in the console: ```Uncaught TypeError: $(...).fadeOut is not a function at letterGone (earth.js:96) at nextSlide (earth.js:89)``` – Adam Jan 14 '20 at 02:54
Yes, I've copied jQuery into a .js file of it's own and referenced it `` – Adam Jan 15 '20 at 21:32
@Adam where did you get the JQuery from? what version? why did you copy it in another js file? why not just reference the library? – Nawed Khan Jan 15 '20 at 22:49

Adam · Accepted Answer · 2020-01-14T04:25:59.890

Thanks @darkmatter. That did it! I basically decided to give up on using jQuery and used a CSS transition instead. Specifically, this got me there...https://stackoverflow.com/a/18760338/12706569.

I ended up putting the following in my css:

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

and I put this in my javascript (with some cleaning up as well):

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

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

2 Answers2