This code doesn't make much sense, if you ask me. I can't even get it to work.

If you want to fade two images using states then this works:

javascript Code: 
  1. import QtQuick 2.4
  2.  
  3. Item {
  4.     anchors.fill: parent
  5.  
  6.     states: [
  7.         State { // this will fade in rect2 and fade out rect
  8.             name: "fadeInRect2"
  9.             PropertyChanges { target: rect; opacity: 0}
  10.             PropertyChanges { target: rect2; opacity: 1}
  11.         },
  12.         State   { // this will fade in rect and fade out rect2
  13.             name:"fadeOutRect2"
  14.             PropertyChanges { target: rect;opacity:1}
  15.             PropertyChanges { target: rect2;opacity:0}
  16.         }
  17.     ]
  18.  
  19.     transitions: [
  20.         Transition {
  21.             NumberAnimation { property: "opacity"; easing.type: Easing.InOutQuad; duration: 2500  }
  22.         }
  23.     ]
  24.  
  25.     Image {
  26.         id: rect2
  27.         smooth: true
  28.         anchors.fill: parent
  29.         source: "/usr/share/icons/oxygen/256x256/apps/yakuake.png"
  30.     }
  31.  
  32.     Image {
  33.         id: rect
  34.         smooth: true
  35.         anchors.fill: parent
  36.         source: "/usr/share/icons/oxygen/256x256/apps/showfoto.png"
  37.     }
  38.  
  39.     state: "fadeInRect2"
  40.  
  41.     MouseArea {
  42.       anchors.fill: parent
  43.       onClicked: {
  44.           parent.state = parent.state == "fadeInRect2" ? "fadeOutRect2" : "fadeInRect2"
  45.       }
  46.     }
  47. }
To copy to clipboard, switch view to plain text mode