meegim/qml/TopPanel.qml

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
    z: 10
    id: topPanel

    property int pauseHide: 500

    function showPanel() {
        animShowPanel.running = true
    }

    function hidePanel() {
        animHidePanel.running = true
    }

    x: 0; y: -topPanel.height
    height: 40
    width: parent.width
    color: "black"
    opacity: 0.7

    SequentialAnimation {
        id: animHidePanel
        running: false
        PauseAnimation { duration: pauseHide }
        NumberAnimation {
            target: topPanel;
            property: "y";
            from: 0; to: -topPanel.height
            duration: 700;
            easing.type: Easing.InOutQuad
        }
    }

    NumberAnimation {
        running: false
        id: animShowPanel
        target: topPanel;
        property: "y";
        from: -topPanel.height; to: 0
        duration: 300;
        easing.type: Easing.InOutQuad
    }
}