Je vous présente mon problème : j'ai créé une sorte de slideshow qui se présente de la manière suivante : 3 images en ligne , chaque image a une largeur de 25% au départ, le but étant que, lors du survol de la souris sur une des images, celle ci occupe 35% de la largeur, et les deux autres seulement 20 %.

<div id="banner">
 	<div id="img1"><img src="pictures/img1.JPG" alt="img1" /></div>
 	<div id="img2"><img src="pictures/img2.JPG" alt="img2" /></div>
 	<div id="img3"><img src="pictures/img3.JPG" alt="img3" /></div>
 </div>

J'ai placé les images côte à côte grâce à Flexbox, et j'ai caché le surplus grâce à Overflow :hidden. Le but est donc d'en montrer un peu plus lors du survol de la souris.

#banner
{
	height: auto;
	width: auto;
	margin: auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#img1
{
	height: 362px;
	width: 25%;
	overflow: hidden;
	border: 1px black solid;
}

#img2
{
	height: 362px;
	width: 25%;
	overflow: hidden;
	border: 1px black solid;
}

#img3
{
	height: 362px;
	width: 25%;
	overflow: hidden;
	border: 1px black solid;
}

J'ai écrit un script qui augmente progressivement la largeur de mes images lors du survol de la souris, et il fonctionne bien. Cependant, j'ai besoin d'utiliser une fonction ResetFrom (qui doit remettre mes images à leur état de base : 25% chacune) AVANT la fonction qui permet d'agrandir mon image (sinon, je ne pourrais pas passer directement d'une image à l'autre). Je vous mets ici l'intégralité du script en question :

document.getElementById('img1').addEventListener("mouseenter", ActivateA);
document.getElementById('img2').addEventListener("mouseenter", ActivateB);

let img1Active = false;
let img2Active = false;
let img3Active = false;

function ResetFromB() {
    console.log('Le détecteur d\'évênement sortie image 2 a bien fonctionné !');

    function Inactive() {
        this.final = 25; 
        this.active = 35; 
        this.inactive = 20;

        function Back() {
            if(active > final) {
                active -= 1;
                inactive += 0.5;
                document.getElementById('img2').style.width = active + "%";
                document.getElementById('img1').style.width = inactive + "%";
                document.getElementById('img3').style.width = inactive + "%";
                setTimeout(Back, 0.1);
            }
        }Back();
    }Inactive();
}

function ActivateA(){
	
    console.log('Le détecteur d\'évênement entrée image 1 a bien fonctionné !');

    function ResetFrom() {
        if (img2Active){
            console.log("reset from B, then widen A");
            ResetFromB;
        } else if (img3Active){
            console.log("reset from C, then widen A");
           // ResetFromC();
        } else {
            console.log("just widen A");
        } 
    }ResetFrom();

    function Active() {
        this.maxActiveWidth = 35; 
        this.currentActiveWidth = 25;
        this.maxInactiveWidth = 20;
        this.currentInactiveWidth =25;
        function Resize() {
        	if(currentActiveWidth < maxActiveWidth) {
                currentActiveWidth += 0.1;
                currentInactiveWidth -= 0.05;
                document.getElementById('img1').style.width = currentActiveWidth + "%"; 
                document.getElementById('img2').style.width = currentInactiveWidth + "%"; 
                document.getElementById('img3').style.width = currentInactiveWidth + "%"; 
                setTimeout(Resize, 0.1); 
            }
        } Resize();
    } Active();

    img1Active = true;
    img2Active = false;
    img3Active = false;
}

function ActivateB(){
	console.log('Le détecteur d\'évênement entrée image 2 a bien fonctionné !');

    function Resetfrom() {
        if (img1Active){
            console.log("reset from A, then widen B");
            //ResetFromA();
        } else if (img3Active){
            console.log("reset from C, then widen B");
           // ResetFromC();
        } else {
            console.log("just widen B");
        }
    }Resetfrom();

    img2Active = true;
    img1Active = false;
    img3Active = false;

    function Active() {
        this.activeWidth = 35;
        this.currentWidth = 25;
        this.inactiveWidth = 20;
        this.currentInactiveWidth =25;
        function Resize() {
        	if(currentWidth < activeWidth) {
                currentWidth += 0.1;
                currentInactiveWidth -= 0.05;
                document.getElementById('img2').style.width = currentWidth + "%";
                document.getElementById('img1').style.width = currentInactiveWidth + "%";
                document.getElementById('img3').style.width = currentInactiveWidth + "%";
                setTimeout(Resize, 0.1);
            }
        } Resize();
    } Active();
}

J'ai remarqué qu'en neutralisant la fonction "Active" dans "ActivateA", la fonction "ResetFrom" fonctionne correctement. La seule explication logique à mes yeux est que la fonction "Active" s'exécute entièrement, ou au moins en partie, en même temps que la fonction "ResetFrom".

Merci d'avance pour vos réponses, et n'hésitez pas à me demander des détails si je me suis mal exprimé Je suis un vrai débutant en Javascript donc n'hésitez pas à me faire également remarquer des choses qui peuvent vous paraître évidentes.

NB : dans le code ci-dessus, j'ai omis volontairement la partie concernant l'image 3, cela serait redondant.