mobile animation demo subtopic

by gravitybox

HTML

<div id='button'>
    <div id='clicked'></div>
</div>
<img id='ui' src='http://ux.mindjet.com/mobilemapping/ui1.png'>
<div id='frame'>
    <img id='topic' src='http://ux.mindjet.com/mobilemapping/topic.png'>
    <img id='line' src='http://ux.mindjet.com/mobilemapping/line.png'>
    <input type='text' id='floating'></input>
    <div id='frame2'></div>
</div>
<img id='keypad' src='http://ux.mindjet.com/mobilemapping/keypad.png'

CSS

#button {
    position:absolute;
    top:505px;
    left:60px;
    width:50px;
    height:50px;
    z-index:99;
    cursor:pointer;
}
#clicked {
    border:1px solid #fff;
    border-radius:5px;
    width:35px;
    height:35px;
    position:absolute;
    top:7px;
    left:4px;
    z-index:20;
    
    
}
#topic {
    position:relative;
    top:-26px;
    left:-22px;
    z-index:10;
}
#line {
    position:relative;
    top:-114px;
    left:55px;
    z-index:11;
    display:none;
}
#ui {
    position:absolute;
    top:-5px;
    left:-4px;
}
#keypad {
    position:absolute;
    top:295px;
    left:0px;
    display:none;
    width:320px;
    z-index:150;
}
#frame {
    border:2px solid #008ae8;
    border-top:4px solid #008ae8;
    border-radius:5px;
    width:128px;
    height:40px;
    position:absolute;
    top:162px;
    left:90px;
    z-index:20;
}
#frame2 {
    border:2px solid #008ae8;
    border-top:4px solid #008ae8;
    border-radius:5px;
    width:117px;
    height:48px;
    position:relative;
    top:-159px;
    left:165px;
    z-index:20;
    display:none;
}
#floating {
    border:2px solid #999;
    width:100px;
    height:40px;
    position:absolute;
    top:-34px;
    left:168px;
    z-index:30;
    display:none;
}
input {
    width:100px;
    height:40px;
    border:none;
    padding-left:10px;
    border-radius:5px;
    font-size:18px;
    color:#888;
    outline:none;
}

JavaScript

$(document).ready(function () {

            $('#button').click(function (event) {
        $('#clicked').animate({
            backgroundColor: '#008ae8'
        }, 25);         
                
        $('#clicked').animate({
            height: '50px',
            width: '50px',
            top: '-=8',
            left: '-=8',
            opacity: '0'
        }, 250);
       
        //$('#floating').clone().prependTo( "#canvas" ).css({top: toppos, left: leftpos});
        //$('#frame').css({top: toppos-6, left: leftpos-5});
        $('#frame').animate({
            left: '-=160'
        }, 400);
        $('#frame').css({
            'border': '2px solid #ffffff',
            'border-top': '4px solid #ffffff'
        });
        $('#line').delay(200).show('blind', {
            duration: 500,
            direction: 'left',
            easing: 'easeOutExpo'
        });

        $('#floating').delay(400).show('scale', {
            duration: 300,
            easing: 'easeOutBack'
        }, function () {
            $('input').focus();
            $('#keypad').show('slide', {
                duration: 500,
                direction: 'down',
                easing: 'easeOutExpo'
            });

        });
        $('#frame2').delay(500).show('fade', {
            duration: 500,
            easing: 'easeInQuart'
        });




                
    });




});