Jennifer smiley

by wrxsti85

HTML

<div id="head">
    <div id="lEye"></div>
    <div id="rEye"></div>
    <div id="mouth"></div>
</div>
<div id="cloud">
    <p>
        
    </p>
</div>

<div id="square"></div>

CSS

div#head {
    background: yellow;
    width: 300px;
    height: 300px;
    border: solid 4px black;
    border-radius: 163px;
    position: relative;
    
}
div#lEye {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: black;
    position: absolute;
    border-radius: 124px;
    left: 30%;
    top: 20%;
}
div#rEye {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: black;
    position: absolute;
    border-radius: 124px;
    right: 30%;
    top: 20%;
}
div#mouth {
    background: black;
    width: 80px;
    height: 10px;
    margin: 0px auto;
    position: relative;
    top: 200px;
    border-radius: 100px;
}

#cloud{
    width: 250px;
    height: 214px;
    background-image: url(http://openclipart.org/image/800px/svg_to_png/154093/Bubble_talk.png);
    background-size: 100%;
    position: absolute;
    top: 0px;
    left: 309px;
    background-repeat: no-repeat;
    padding: 28px;
    font-size: 26px;
    font-family: "Comic Sans MS";
    display:none;
    
}

#square {
    background-color: black;
    width: 80px;
    height: 60px;
    position: relative;
    padding:25px;
}

JavaScript

$("#lEye, #rEye").click(function(){
     $("#cloud p").text("YO!");
    $(this).animate({
        height: "1px",
        top: "25%"
    }, function(){
        $(this).animate({
            height: "30px",
            top: "20%"
        });
    }); 
    $("#cloud").fadeIn(200).delay(1000).fadeOut(200); 
});

$("#mouth").click(function(){
    $("#cloud p").text("HEYYYYYYYYYY! My name is Carl! That's what's up!");
    $(this).animate({
        height: "40px",
        top: "190px"
    }, function(){
        $(this).animate({
            height: "10px",
            top: "200px"
        });
    });
    $("#cloud").fadeIn(200).delay(1000).fadeOut(200);
});

$("#square").click(function(){
    $(this).animate({
        top:"100px"
    }, function(){
        $(this).animate({
            left: "428px"
        }, function(){
            $(this).animate({
                top:"0px"
            }, function(){
                $(this).animate({
                    left:"0px"
                })
            })
        }); 
    });
});