emo massage

by dafin defandaky

HTML

<div class='emo'>kkkk</div>

<div class='db_ass no-print work on' id='db_ass'><div class='db_cover'><span class='eye'><i/></span></div><div class='massg-emo l static-tooltip'>Jangan lupa untuk menambahkan setidaknya satu karakter spasi sebelum kode emotikon. Jika tidak begitu, emotikon tidak akan bisa terbaca. Ini demi mencegah agar karakter-karakter &#8220;bukan emotikon&#8221; yang muncul dari kode atau kesalahan penulisan tidak berubah menjadi emotikon &#183; <a class='link-close' href='#'>ok</a></div></div>

CSS

.db_ass{width:20px;height:20px;position:absolute;top:60px;left:314px;background-color:#888;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.6);-moz-box-shadow:0 1px 3px rgba(0,0,0,.6);box-shadow:0 1px 3px rgba(0,0,0,.6);background-color:#888}.db_ass .eye{display:block;overflow:hidden;background-color:#fff;position:absolute;top:4px;right:1px;bottom:4px;left:1px;border:2px solid #888;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 1px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.4),inset 0 1px 2px rgba(0,0,0,.4);-moz-box-shadow:0 0 1px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.4),inset 0 1px 2px rgba(0,0,0,.4);box-shadow:0 0 1px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.4),inset 0 1px 2px rgba(0,0,0,.4);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box}.db_ass .eye i{display:block;width:6px;height:6px;background-color:#333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:1px 0 0 4px;position:relative}.db_ass.on .eye i{-webkit-animation:a1 5s linear infinite alternate,a2 7s linear infinite alternate 5s;-moz-animation:a1 5s linear infinite alternate,a2 7s linear infinite alternate 5s;-ms-animation:a1 5s linear infinite alternate,a2 7s linear infinite alternate 5s;-o-animation:a1 5s linear infinite alternate,a2 7s linear infinite alternate 5s;animation:a1 5s linear infinite alternate,a2 7s linear infinite alternate 5s}.db_ass .eye i:before{content:&quot;&quot;;display:block;position:absolute;top:1px;right:2px;width:1px;height:1px;background-color:#fff;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.db_ass .massg-emo{display:none;width:200px;min-height:18px;word-wrap:break-word;white-space:normal;line-height:normal}.db_ass .tooltip-emo:before{top:10px}.db_ass .tooltip-emo.push{top:-185px;min-height:224px}.db_ass .tooltip-emo.push:before{top:191px;bottom:auto}.no-js .db_ass...

JavaScript

$(document).ready(function() {
$('.emo').click(function() {
$('.massg-emo.l static-tooltip').animate({width:"200px"}, 4000, 'easeInOutExpo');
$('.db_ass').css({position:'fixed',left:'439px'}).animate({top:"50%"}, 4000, 'easeInOutExpo');
$(this).hide();$('.db_ass.on .massg-emo').fadeIn('slow');
$(this).hide();$('.emo').fadeIn();
});
$('.link-close').click(function() {
$('.db_ass').css({position:'absolute',left:'314px'}).animate({top:"60px"}, 3400, 'easeInOutExpo');
$(this).hide();$('.db_ass.on .massg-emo').fadeOut();
$(this).hide();$('.link-close').fadeIn('slow');});
});