Method animate() memungkinkan Anda menganimasikan nilai numerik CSS seperti width, height, margin, padding, dan left/top.
jQuery Animate
Contoh Kode jQuery jQuery Animate:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body style="font-family: sans-serif; padding: 20px;">
<button id="btnAnimasi" style="padding:8px 16px; cursor:pointer;">Mulai Animasi Kotak</button>
<div id="kotakAnim" style="background:#00758f; width:80px; height:80px; position:relative; margin-top:15px; border-radius:8px;"></div>
<script>
$('#btnAnimasi').click(function() {
$('#kotakAnim').animate({
left: '200px',
width: '140px',
height: '140px',
opacity: 0.7
}, 800);
});
</script>
</body>
</html>
Uji interaksi jQuery di atas dan amati animasi efek DOM secara langsung.