How Do I fix this issue with my main menu buttons

[XxDawitGamerYTxX (Ryomen_Sukuna)]

Hello Everyone,

Im making a main menu with the buttons having a background appear when the player hovers over one of the buttons. Though, theres a problem with the background not appearing quick and smooth, and the background not going all the way back down to 1 transparency. Theres also another problem when the player moves their cursor on all of them, they bug out a bit. Can anyone explain how I could fix this. Here is the code and the video to the problem.

local textButton = script.Parent
local imageLabel = textButton.Parent:WaitForChild("ImageLabel")

-- Function to fade in the ImageLabel
local function fadeIn()
	for i = 0, 0.37, 0.05 do
		imageLabel.ImageTransparency = 1 - i
		wait(0.05)
	end
end

-- Function to fade out the ImageLabel
local function fadeOut()
	for i = 0.37, 0, -0.05 do
		imageLabel.ImageTransparency = 1 - i
		wait(0.05)
	end
end

-- Connect the hover events
textButton.MouseEnter:Connect(fadeIn)
textButton.MouseLeave:Connect(fadeOut)

[SeargentAUS (Seargent)]

The issue is that you are triggering the fadeout while the fadeIn is still occuring, due to you moving your cursor outside of the button while the fade is active.

One way to get around this is to use a tween instead of a loop. It’ll be smoother and should prevent this issue (note you may wish to implement basic maths into the tween so that the speed is consistant)