Program saya: https://jsfiddle.net/60ucsfrb/

Saya mencoba menyalin format fungsi perubahan ukuran saya yang berhasil mengulang sendiri dan terus mengubah ukuran div dengan bantuan interval dari fungsi bernyawa. Namun, ketika saya mencoba melakukan format yang sama untuk opacity perubahan saya untuk div, itu tidak berhasil. Alih-alih itu hanya berfungsi sekali, membuat opacity 0,9 dari 1 dan selesai. Saya akan mencoba for loop sebagai gantinya, tapi saya rasa saya tidak seharusnya melakukannya karena fungsi animate seharusnya sudah mengulangnya untuk saya, tapi saya tidak yakin.

Ini adalah fungsi perubahan ukuran yang BEKERJA dan mengubah div dari 150 menjadi 50.

function shrinkSize(elem){
    var currentWidth = parseInt(getTheStyle(elem.id,'width'))-2;
    elem.style.width=currentWidth+"px";

    if(parseInt(elem.style.width)==50){
        clearInterval(sizeTimer);
        sizeTimer = setInterval(function(){growSize(elem);},10);
    }
    
}

function growSize(elem){
        var currentWidth = parseInt(getTheStyle(elem.id,'width'))+2;
        elem.style.width=currentWidth+"px";
    
    if(parseInt(elem.style.width)==150){
        clearInterval(sizeTimer);
        sizeTimer = setInterval(function(){shrinkSize(elem);},10);
    }
}

Ini adalah fungsi animate yang membuat interval untuk loop.

var moveTimer;
var sizeTimer;
var opacityTimer;
var mover = document.getElementById("movingElem");

    function Animate(elem){
        //only clears most recent interval, cant clear anything before that
        clearInterval(moveTimer);
        clearInterval(sizeTimer);
        clearInterval(opacityTimer);
        moveTimer = setInterval(function(){MoveRight(elem,'wrapper');}, 10);//a function that'll call another function after certain amount of time, speed of animation, once every ten milisecond
        sizeTimer = setInterval(function(){shrinkSize(elem);}, 10);
        opacityTimer = setInterval(function(){decreaseOpacity(elem);}, 10);
    
    }

Dan ini adalah fungsi opacity perubahan TIDAK BEKERJA yang saya coba ikuti format yang sama dengan fungsi perubahan ukuran.

function increaseOpacity(elem){
    var currentOpacity = parseInt(getTheStyle(elem.id,'opacity'))+0.1;
    elem.style.opacity= parseInt(currentOpacity);
    console.log(currentOpacity);

    if(parseInt(elem.style.opacity)==1){
        clearInterval(opacityTimer);
        opacityTimer = setInterval(function(){decreaseOpacity(elem);},10);
    }
}


function decreaseOpacity(elem){
    var currentOpacity = parseInt(getTheStyle(elem.id,'opacity'))-0.1;
    elem.style.opacity=currentOpacity;


    if(parseInt(elem.style.opacity)==0){
        clearInterval(opacityTimer);
        opacityTimer = setInterval(function(){increaseOpacity(elem);},10);
    }
}

Saya tahu ini ada hubungannya dengan garis opacity ini yang tidak cocok dengan piksel ini dalam ukuran yang berubah, tetapi saya tidak tahu bagaimana membuatnya berfungsi.

elem.style.opacity= parseInt(currentOpacity);

elem.style.width=currentWidth+"px";
0
Strollas 19 November 2020, 10:36

1 menjawab

Jawaban Terbaik

Saya pikir masalahnya adalah Anda menggunakan parseInt yang mem-parsing angka menjadi bilangan bulat bulat (dalam kasus Anda setelah penyusutan pertama, ini mem-parsing opacity dari '0,9' ke 0). Dalam kasus opacity Anda berurusan dengan desimal, jadi Anda harus menggunakan parseFloat sebagai gantinya.

function increaseOpacity(elem){
    var currentOpacity = parseFloat(getTheStyle(elem.id,'opacity'))+0.1;
    elem.style.opacity= parseFloat(currentOpacity);
    console.log(currentOpacity);

    if(parseFloat(elem.style.opacity)==1){
        clearInterval(opacityTimer);
        opacityTimer = setInterval(function(){decreaseOpacity(elem);},10);
    }
}


function decreaseOpacity(elem){
    var currentOpacity = parseFloat(getTheStyle(elem.id,'opacity'))-0.1;
    elem.style.opacity=currentOpacity;


0
yochanan sheinberger 19 November 2020, 07:54