12181632_Animasi jQuery

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Desain Web</title>
<script src="jquery-1.9.1.js"></script>
<script>
    $(document).ready(function(){
        $( "#tombol_animasi" ).click(function(){
            $( "#box" ).animate({
                width : "80%",
                height : "80px",
                opacity : 0.4
            });
        });
    });
</script>
<style>
    #box {
    width: 100px;
    height : 50px;
    background-color : silver;
    border: 2px solid black;
    padding :0 10px;
    }
</style>
</head>
<body>
    <h2>Praktik Animasi jQuery</h2>
    <button id="tombol_animasi">Buka Box</button>
    <br></br>
    <div id="box"></div>
</body>
</html>

<!--Mengatur Durasi Animasi jQuery-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Desain Web</title>
<script src="jquery-1.9.1.js"></script>
<script>
    $(document).ready(function(){
        $( "#tombol_animasi" ).click(function(){
            $( "#box" ).animate({
                width : "80%",
                height : "80px",
                opacity : 0.4
            }, "slow");
            $( "#paragraf" ).animate({
            fontSize : "40px",
            }, 3000);
        });
    });
</script>
<style>
    #box {
    width: 100px;
    height : 50px;
    background-color : pink;
    border: 2px solid black;
    }
</style>
</head>
<body>
    <h2>Praktik Animasi jQuery</h2>
    <button id="tombol_animasi">Buka Box</button>
    <br></br>
    <div id="box"></div>
    <p id="paragraf">Hellooo, I'am here...</p>
</body>
</html>