Crossfade using states and transitions

brasscs1

Am trying to get qml to crossfade two images but am having no luck. The code below appears to fade but no image is displayed. Can someone see the error(s)

main.qml
Background{id:background}

Background.qml

Image {
id: topImage
width: parent.width
height: parent.height
opacity: 1
smooth: true
source:"../../assets/red.jpg"

Image   {
    id: bottomImage
    width:parent.width
    height: parent.height
    anchors.fill: parent
    opacity: 0
    smooth: true
    source:""
}

states: [
    State   { // fade out the top image and fade in the bottom image
        name: "fadeTop"
        when: bottomImage.status==Image.Ready
        PropertyChanges { target:topImage;opacity:0}
        PropertyChanges { target:bottomImage;opacity:1}
    },
    State {
        name: "fadeBottom"
        when: topImage.status==Image.Ready
        PropertyChanges { target: topImage;opacity:1}
        PropertyChanges { target:bottomImage;opacity:0}
    }
]

transitions: [
    Transition {
        to: "fadeTop"
        ParallelAnimation   {
            NumberAnimation { properties: "opacity";easing.type: Easing.InOutQuad; duration: 2500}
            NumberAnimation { properties: "opacity";easing.type: Easing.InOutQuad; duration: 2500}
        }
        onRunningChanged: {
            console.log("running fadeTop finished");
            if(!running) busy.running=false;
        }
    },
    Transition  {
        to: "fadeBottom"
        ParallelAnimation   {
            NumberAnimation { properties: "opacity";easing.type: Easing.InOutQuad; duration: 2500}
            NumberAnimation { properties: "opacity";easing.type: Easing.InOutQuad; duration: 2500}
        }
        onRunningChanged: {
            console.log("running fadeBottom finished");
            if(!running) busy.running=false;
        }
    }
]

function    toggler()   {
    console.log("*********************** Toggler Entered************************");

    console.log("backgroundUrl is " + backgroundUrl)
    if(topImageVisible) { // fade out the top image and fade in the bottom image
        bottomImage.source=backgroundUrl;
        background.state="fadeTop";
    }

    else { // fade out the bottom image and fade in the top image
        topImage.source=backgroundUrl;
        background.state="fadeBottom"
    }

    topImageVisible = !topImageVisible;

}

}