Dunk that cookie

Testing out cookie dunks

by grammar

HTML

<div class="glass">
    <div id="back-of-cup"></div>
    <div id="dunked-cookie"></div>
    <div id="cookie"></div>
    <div id="front-of-cup"></div>
</div>
<button id="dunk">Dunk the cookie!</button>

CSS

.glass {
    width: 128px;
    height: 128px;
    position: relative;
    background: #333;
    padding: 50px 0;
}

#cookie {
    background: url(http://grammarstudios.com/cookies/chocolate-chip.png) no-repeat 0 0;
    width: 52px;
    height: 53px;
    position: absolute;
    left: 38px;
    top: 0;
}
#dunked-cookie {
    background: url(http://grammarstudios.com/cookies/dunked-chocolate-chip.png) no-repeat 0 0;
    width: 52px;
    height: 53px;
    position: absolute;
    left: 38px;
    top: 0;
}

#back-of-cup {
    background: url(http://grammarstudios.com/cookies/back-of-cup.png) no-repeat 0 0;
    width: 128px;
    height: 128px;
    position: absolute;
}

#front-of-cup {
    background: url(http://grammarstudios.com/cookies/front-of-cup.png) no-repeat 0 0;
    width: 128px;
    height: 128px;
    position: absolute;
}

@-webkit-keyframes dunk-real-cookie
{
    0% {top: 0px;}
    50% {top: 50px; }
    100% {top: 0px; opacity: 0; }
}
@-webkit-keyframes dunk-milky-cookie
{
    0% {top: 0px;}
    50% {top: 50px; }
    100% {top: 0px; }
}


.animate-cookie {
    background:url(http://grammarstudios.com/cookies/dunked-chocolate-chip.png);
    -webkit-animation: dunk-real-cookie 1s;
    animation: dunk-real-cookie 1s;
}

.animate-dunked {
    -webkit-animation: dunk-milky-cookie 1s;
    animation: dunk-milky-cookie 1s;
}

JavaScript

var $cookie = $('#cookie'),
    $dunkedCookie = $('#dunked-cookie'),
    $dunkButton = $('#dunk'),
    animateCookie = 'animate-cookie',
    animateDunked = 'animate-dunked';

$dunkButton.click( function( e ) {
    
    if( !$cookie.hasClass( animateCookie )  ) {
        $cookie.addClass( animateCookie );
        $dunkedCookie.addClass( animateDunked );
        setTimeout( function() { 
            $cookie.removeClass( animateCookie );
            $cookie.hide();
            $dunkedCookie.removeClass( animateDunked );         
        }, 1000 );
    }
        
});