Crossfade two images in QML

[sysv]

Been trying to crossfade 2 images using states and transitions but can't seem to find my newbie error. Upon clicking the image fades correctly the 1st time then from then from then on fails. Here is the code. Anyone see my error(s)

Item {
    anchors.fill: parent
 
    states: [
        State { // this will fade in rect2 and fade out rect
            name: "fadeInRect2"
            PropertyChanges { target: rect; opacity: 0}
            PropertyChanges { target: rect2; opacity: 1}
        },
        State   { // this will fade in rect and fade out rect2
            name:"fadeOutRect2"
            PropertyChanges { target: rect;opacity:1}
            PropertyChanges { target: rect2;opacity:0}
        }
    ]
 
    transitions: [
        Transition {
            to: "fadeInRect2"
            ParallelAnimation   {
                NumberAnimation { properties: "opacity"; from:1;to:0;easing.type: Easing.InOutQuad; duration: 2500  }
                NumberAnimation { properties: "opacity"; from:0;to:1;easing.type: Easing.InOutQuad; duration: 2500  }
            }
            onRunningChanged: {
                if(!running) busyIndicator.running=false;
            }
        },
        Transition {
            to: "fadeOutRect2"
            ParallelAnimation   {
                NumberAnimation { properties: "opacity";from:0;to:1;easing.type: Easing.InOutQuad; duration: 2500  }
                NumberAnimation { properties: "opacity";from:1;to:0;easing.type:Easing.InOutQuad; duration:2500}
            }
            onRunningChanged: {
                if(!running) busyIndicator.running=false;
            }
        }
    ]
 
    Image {
        id: rect2
        smooth: true
        opacity: 0
        anchors.fill: parent
        onStatusChanged: {
            if(rect2.status===Image.Ready) {
                console.log('rect2 img is ready');
                fader.state='fadeInRect2';
                console.log('doing fadeInRect2');
            }
        }
    }
 
    Image {
        id: rect
        smooth: true
        anchors.fill: parent
        opacity: 1
 
        onStatusChanged: {
            if(rect.status===Image.Ready) {
                console.log('rect img is ready');
                fader.state='fadeOutRect2';
                console.log('doing fadeOutRect2');
            }
        }
    }
 
    function toggle()   {
        busyIndicator.running=true;
 
        if(!rect2.opacity) { // load to the rect that has 0 opacity
            rect2.source="../../assets/red.jpg"
        }
        else  {
            rect.source="../../assets/green.jpg"
        }
    }
}

Item {
    anchors.fill: parent

    states: [
        State { // this will fade in rect2 and fade out rect
            name: "fadeInRect2"
            PropertyChanges { target: rect; opacity: 0}
            PropertyChanges { target: rect2; opacity: 1}
        },
        State   { // this will fade in rect and fade out rect2
            name:"fadeOutRect2"
            PropertyChanges { target: rect;opacity:1}
            PropertyChanges { target: rect2;opacity:0}
        }
    ]

    transitions: [
        Transition {
            to: "fadeInRect2"
            ParallelAnimation   {
                NumberAnimation { properties: "opacity"; from:1;to:0;easing.type: Easing.InOutQuad; duration: 2500  }
                NumberAnimation { properties: "opacity"; from:0;to:1;easing.type: Easing.InOutQuad; duration: 2500  }
            }
            onRunningChanged: {
                if(!running) busyIndicator.running=false;
            }
        },
        Transition {
            to: "fadeOutRect2"
            ParallelAnimation   {
                NumberAnimation { properties: "opacity";from:0;to:1;easing.type: Easing.InOutQuad; duration: 2500  }
                NumberAnimation { properties: "opacity";from:1;to:0;easing.type:Easing.InOutQuad; duration:2500}
            }
            onRunningChanged: {
                if(!running) busyIndicator.running=false;
            }
        }
    ]

    Image {
        id: rect2
        smooth: true
        opacity: 0
        anchors.fill: parent
        onStatusChanged: {
            if(rect2.status===Image.Ready) {
                console.log('rect2 img is ready');
                fader.state='fadeInRect2';
                console.log('doing fadeInRect2');
            }
        }
    }

    Image {
        id: rect
        smooth: true
        anchors.fill: parent
        opacity: 1

        onStatusChanged: {
            if(rect.status===Image.Ready) {
                console.log('rect img is ready');
                fader.state='fadeOutRect2';
                console.log('doing fadeOutRect2');
            }
        }
    }

    function toggle()   {
        busyIndicator.running=true;

        if(!rect2.opacity) { // load to the rect that has 0 opacity
            rect2.source="../../assets/red.jpg"
        }
        else  {
            rect.source="../../assets/green.jpg"
        }
    }
}

To copy to clipboard, switch view to plain text mode