membuat notifikasi menggunakan animasi

by Mas Aab

HTML

<button class="show-about">About Me</button>
<body>
 <div class="info-panel" id="info-panel">
     <div class='inner-panel'>
     <a href="#close" id="close-about" class="close-button pull-right" title="Tutup" data-icon=""> Close</a>

                            <p>Nama Saya <strong>aab</strong>. ini hanya sebuah demo untuk tutorial sederhana</p>
                            <br>
                            <p>Tadinya Blog ini saya buat hanya untuk bahan percobaan saja, percobaan mengenai tampilan dan desain, serta optimasi SEO yang sangat saya perhatikan, namun lambat laun saya lupa dengan semua itu dan lebih memfokuskan terhadap Desain saja.

Warning! Template ini saya desain sendiri dan bukan kode sumber terbuka dan saya berharap anda tidak menyalin atau menjiplaknya begitu saja. Mungkin hanya untuk di buat pembelajaran saja.
Dan apabila Isi atupun konten dalam blog ini melanggar hak saudara maupun rekan-rekan, Silahkan Klik Delik Aduan.</p>
                            <br>
                            <p>Selamat menjalankan ibadah puasa.</p>
                        </div>
         </div>
    
    <body>

CSS

body{
    height:1000px;
    max-height:100%;
}
.info-panel .close-button {
    position:relative;
    display:inline;
    margin-top:-10px;
    width:100%
}
.close-button {
    cursor:pointer;
}
#info-panel {
    float:left;
    display:none;
    padding:20px;
    line-height:1.8em;
    max-height:620px;
    right:-3px;
    position:absolute;
    background-color:#111;
    overflow:hidden;
    z-index:1;
}
.inner-panel{
    display:none;
}
.info-panel {
    float:left;
    left:2px;
    color:#fff;
    border:1px solid #383636;
    -webkit-box-shadow:0 1px 3px black;
    -moz-box-shadow:0 1px 3px black;
    box-shadow:0 1px 3px black;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:3px
}

JavaScript

$(".show-about").click(function () {
    $(".info-panel").show().animate({
        width: 535,height:500
                }, 1200, "easeOutExpo",function() {
    $(".inner-panel").fadeIn(1000)
                })
});
$(".close-button").click(function () {
    $(".inner-panel").fadeOut(1000)
        $(".info-panel").delay(1000).animate({
        width: 0
        }, 1200, "easeOutExpo",function() {
            $(".info-panel").hide()
        })
});

/*--------Jquery Easing------*/
jQuery.easing.jswing = jQuery.easing.swing;
jQuery.extend(jQuery.easing, {
    def: "easeOutQuad",
    swing: function (e, f, a, h, g) {
        return jQuery.easing[jQuery.easing.def](e, f, a, h, g)
    },
    easeOutElastic: function (f, h, e, l, k) {
        var i = 1.70158;
        var j = 0;
        var g = l;
        if (h == 0) {
            return e
        }
        if ((h /= k) == 1) {
            return e + l
        }
        if (!j) {
            j = k * 0.3
        }
        if (g < Math.abs(l)) {
            g = l;
            var i = j / 4
        } else {
            var i = j / (2 * Math.PI) * Math.asin(l / g)
        }
        return g * Math.pow(2, -10 * h) * Math.sin((h * k - i) * (2 * Math.PI) / j) + l + e
    }
}); 
(function (a) {
    a.easing.jswing = a.easing.swing;
    a.extend(a.easing, {
        def: "easeOutQuad",
        swing: function (f, g, e, i, h) {
            return a.easing[a.easing.def](f, g, e, i, h)
        },
        easeInQuad: function (f, g, e, i, h) {
            return i * (g /= h) * g + e
        },
        easeOutQuad: function (f, g, e, i, h) {
            return -i * (g /= h) * (g - 2) + e
        },
        easeInOutQuad: function (f, g, e, i, h) {
            if ((g /= h / 2) < 1) {
                return i / 2 * g * g + e
            }
            return -i / 2 * ((--g) * (g - 2) - 1) + e
        },
        easeInCubic: function (f, g, e, i, h) {
            return i * (g /= h) * g * g + e
        },
        easeOutCubic: function (f,...