Реализация fadeIn () и fadeOut () в функцию после факта - PullRequest
Новая
       59

Реализация fadeIn () и fadeOut () в функцию после факта

0 голосов
/ 14 января 2020

Disclamer: Это, вероятно, глупый вопрос, так как я новичок в Javascript и еще новее в jQuery. Извините, если есть какая-то кодировка "faux pas" или если вы испытываете головокружение, читая то, что я сделал:)

Я работаю над страницей, чтобы просто быть киоском на малиновом пи для отображения миссионера письма в моей церкви на видеоэкране. До сих пор я сделал слайд-шоу для писем, используя старомодный Javascript, и анимировал 3D-шар, используя три. js. Кажется, что все работает хорошо, за исключением того, что я хочу постепенно выводить буквы.

Пока что я изменил непрозрачность изображения между миссионерами на 

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.

Ответы [ 2 ]

0 голосов
/ 14 января 2020

Спасибо @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);
    }
0 голосов
/ 14 января 2020

Да, вы можете просто использовать 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();
}
...