Tutorial Website Lengkap: Dasar Jquery bagian 3 (Slide in and Slide out)

HTML (slide.html)
<!DOCTYPE html>
<html>
<head>
<style>
.box,
#btn1,#btn2 { float:left; margin:5px 10px 5px 0; }
.box { width:80px; background:#090; text-align:center; padding:20px 0 20px 0; color:#FFF; font-family:Arial, Helvetica, sans-serif; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script></head>
<body>
<button id="btn1">slide out</button>
<button id="btn2">slide in</button>
<br>
<br>
<div id="box1" class="box">box1</div>
<script>
$(document).ready(function() {
$("#btn2").click(function () {
$("#box1").show("slide", { direction: "down" }, 1000);
});
$("#btn1").click(function () {
$("#box1").hide("slide", { direction: "down" }, 1000);
});
});
</script>
</body>
</html>

Download File

Tutorial Website Lengkap

Dasar Jquery bagian 3 (Slide in and Slide out)

Tidak ada komentar:

Posting Komentar