mobile animation demo context menu

by gravitybox

HTML

<div id='button'>
    <div class='clicked'></div>
</div>

<div id='button2'>
    <div class='clicked'></div>
</div>

<img id='ui' src='http://ux.mindjet.com/mobilemapping/ui1.png'>
<img id='context1' src='http://ux.mindjet.com/mobilemapping/context1.png'>
<div id='frame' class='frameborder-clear'>
    <img id='topic' src='http://ux.mindjet.com/mobilemapping/topic.png'>
    <img id='line' src='http://ux.mindjet.com/mobilemapping/line.png'>
    
    <div id='frame2'>
    </div>
            <input type='text' id='floating'></input>
    <img id='line2' src='http://ux.mindjet.com/mobilemapping/line.png'>
       <div id='frame3'>
    </div>
            <input type='text' id='floating2'></input>     
</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:150;
    cursor:pointer;
}

#button2 {
    position:absolute;
    top:505px;
    left:118px;
    width:50px;
    height:50px;
    z-index:150;
    cursor:pointer;
}
.clicked {
    border:1px solid #fff;
    border-radius:5px;
    width:43px;
    height:43px;
    position:absolute;
    top:2px;
    left:19px;
    z-index:20;
    display:none;
    
}
#topic {
    position:relative;
    top:-26px;
    left:-22px;
    z-index:10;
}
#line {
    position:relative;
    top:-114px;
    left:55px;
    z-index:11;
    display:none;
}
#line2 {
    position:relative;
    top:-130px;
    left:55px;
    z-index:11;
    display:none;
    transform: scaleY(-1);
}
#ui {
    position:absolute;
    top:-5px;
    left:-4px;
}
#context1 {
    position:absolute;
    top:490px;
    left:0px;
    display:none;
    width:320px;
    z-index:140;
}
#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;
}
#frame3 {
    border:2px solid #008ae8;
    border-top:4px solid #008ae8;
    border-radius:5px;
    width:117px;
    height:48px;
    position:relative;
    top:-176px;
    left:165px;
    z-index:20;
    display:none;
}

.frameborder-clear {
    border-color:#fff !important;
}
.frameborder-blue {
    border-color:#008ae8 !important;
}

#floating {
    border:2px solid #999;
    width:100px;
    height:40px;
    position:absolute;
    top:-34px;
    left:168px;
    z-index:30;
    display:none;
}
#floating2 {
...

JavaScript

$(document).ready(function () {

    $('#frame').click(function (event) {
        $('#frame').switchClass("frameborder-clear", "frameborder-blue", 10, "easeInOutQuad");
        $('#context1').show('slide', {
            duration: 500,
            direction: 'down',
            easing: 'easeOutExpo'
        }, function () {
            $('.clicked').show();
        });

    });


        $('#button').click(function (event) {
    $('#button').children().animate({
        backgroundColor: '#008ae8'
    }, 25);

    $('#button').children().animate({
        height: '63px',
        width: '63px',
        top: '-=10',
        left: '-=10',
        opacity: '0'
    }, 250);


            $('#frame').switchClass("frameborder-blue", "frameborder-clear", 10, "easeInOutQuad");        
    $('#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'
    });




            
});

    
    //start sibling topic interaction
    $('#keypad').click(function (event) {        
    $('#keypad').hide('slide', {
            duration: 500,
            direction: 'down',
            easing: 'easeOutExpo'
        });
    });

           $('#button2').click(function (event) {
    $('#button2').children().animate({
        backgroundColor: '#008ae8'
    }, 25);

    $('#button2').children().animate({
        height: '63px',
        width: '63px',
        top:...