collapse and expand problem

The video will explain the problem much better (it’s only 26 seconds long).
I am wondering what I’m doing wrong, that makes animation behave so badly.
Unfortunately, I can’t add a link to my website because I haven’t published it yet

$w.onReady(function () {
	//TODO: write your page related code here...

});

let flipOptions = {
  "duration":   1000,
  "delay":      100,
  "direction":  "top"
};

export function buttonIdea_mouseIn(event, $w) {
	//Add your code for this event here: 
	
	$w("#TextIdeaFaze").show();
	$w("#IdeafazeBOX").show();
	$w("#box1").show();
	$w("#box1").expand();
}

export function buttonIdea_mouseOut(event, $w) {
	//Add your code for this event here: 

	$w("#TextIdeaFaze").hide("flip", flipOptions);
	$w("#IdeafazeBOX").hide("flip", flipOptions);
	$w("#box1").hide("flip", flipOptions);
 	$w("#box1").collapse();
	
	
	}

export function buttonPre_mouseIn(event, $w) {
	//Add your code for this event here: 
	 
	
	$w("#box1").expand();		
	$w("#box1").show("FadeIn");
	$w("#textPreSIde").show();
	$w("#PreSide").show();
	
	
	}
	
export function buttonPre_mouseOut(event, $w) {
	//Add your code for this event here: 
	$w("#textPreSIde").hide("flip", flipOptions);
	$w("#PreSide").hide("flip", flipOptions);
	$w("#box1").hide("flip", flipOptions);
	$w("#box1").collapse();
	
}