Javascript 在事后将fadeIn（）和fadeOut（）实现为函数

Disclamer：这可能是一个愚蠢的问题，因为我不熟悉Javascript，甚至对jQuery也比较新。抱歉，如果有任何编码“失礼”，或者如果您在阅读我的作品时感到头晕：）

我正在做一个页面，简单地做一个树莓圆周率上的信息亭，在视频屏幕上显示教会的传教士信件。到目前为止，我已经用老式的Javascript为信件制作了幻灯片，并用three.js为3D地球仪制作了动画。除了我想把字母淡入淡出外，一切似乎都很顺利

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

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

或

然而，我希望图像褪色，而不是突然出现或消失。与Javascript相比，我对jQuery更为陌生，但是有没有一种方法可以简单地实现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.

---

是的，您可以简单地使用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();
}

---

谢谢@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中（也做了一些清理）：

---

如果您不介意使用css，这篇文章会很有帮助，我现在在控制台中遇到以下错误：

uncaughttypeerror:$（…）。在nextSlide（earth.js:89）的letterGone（earth.js:96）中fadeOut不是一个函数。

Yes，我已经将jQuery复制到它自己的一个.js文件中，并引用了它

@Adam您从哪里获得jQuery的？什么版本？为什么要将它复制到另一个js文件中？为什么不直接参考图书馆？

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

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