Cara Membuat Animated Toggle dengan jQuery

Orang yang memendam perasaan seringkali terjebak oleh hatinya sendiri. Sibuk merangkai semua kejadian di sekitarnya untuk membenarkan hatinya berharap. Sibuk menghubungkan banyak hal agar hatinya senang menimbun mimpi. Sehingga suatu ketika dia tidak tahu lagi mana simpul yang nyata dan mana simpul yang dusta. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Animated dengan jQuery.

Secara default, semua elemen HTML memiliki posisi statis, dan tidak dapat dipindahkan. Untuk memanipulasi posisi, ingat untuk pertama mengatur properti posisi CSS elemen yang relatif, tetap, atau absolute. Oke langsung saja, berikut Cara Membuat Animated Toggle dengan jQuery.

Seperti biasa, siapkan file index.html nya.

Kemudian kita hubungkan file index.html kita dengan library jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Setelah itu, isi untuk bagian <body> tag-tag HTML berikut.

<p>Click the button multiple times to toggle the animation.</p>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

Dan yang terakhir, isi untuk bagian Javascript nya.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            height: 'toggle'
        });
    });
});
</script>

Bagaimana teman-teman? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang bagaimana Cara Membuat Animated Toggle dengan jQuery.

Semoga bermanfaat, terima kasih