Mouse click animation fade using DOTween don't working

Question

I'm trying to make a mouse click animation using two sprites, one is the mouse normal and the second one is the mouse with the left click highlighted, and i fade the normal sprite (0 to 100) to show the other sprite that is below it.

_ _ _ _ _

These are my three functions to make the animation (i call the Click for the animation):

public void Click() {
    ClickOn();
}

public void ClickOn() {
    print("Click on");
    mouseNoClick.DOFade(endValue: 0f, duration: 0.8f).OnComplete(ClickOff); //mouseNoClick is the sprite of the normal mouse (without highlighted).
}

public void ClickOff() {
    print("Click off");        
    mouseNoClick.DOFade(endValue: 100f, duration: 0.8f);
}

But i'm getting this: https://youtu.be/q7qPt8Hr8Bw

Answer 1

Before starting a new tween try killing it with:

mouseNoClick.DOKill();

You could also convert the whole fade out/in tween into a sequence:

transform.DOKill();
DOTween.Sequence()
    .SetTarget(transform)
    .Append(mouseNoClick.DOFade(0f, 0.8f))
    .Append(mouseNoClick.DOFade(100f, 0.8f));