cara membuat efek membesar dengan jquery animate

, ,

Gambar 0.1 Jquery logo
Kemaren saya share efek slide jquery sekarang saya
kasih efek lagi masih tentang animate() animate yang ini lebih kaya kode css , ada font size dan
width, bisa di kasih efek css yang lain dan untuk prakteknya pastikan anda sudah cdn external jquerynya, atau bisa
cdn di file sendiri dengan download script jquery di webnya langsung yah, kalo cdn external kita harus kasih script sperti ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
dan berikut scriptnya:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>cara membuat efek membesar dengan jquery animate</title>
<style>
*{margin:0;padding:0}
div {
background-color: #bca;
width: 100px;
border: 1px solid green;
margin:2em 0;
}
button{
margin-top:2em;
padding:8px 12px}
iframe{
width:100%;
height:40em;
border:none;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</head>
<body>
<center>
<button id="go">Jalankan</button>
<div id="block">VeriAsha</div>
</center>
<script>
$( "#go" ).click(function() {
$( "#block" ).animate({
width: "100%",
opacity: 0.4,
fontSize: "3em"
}, 3000 );
});
</script>
</body>
</html>

Preview Demo

Tidak ada komentar:

Posting Komentar

Maaf, fitur koment hanya untuk pengguna akun goggle saja.
Dikarenakan untuk meminimalisir komentar spam.