animate() trong jQuery
Miêu tả
Phương thức animate() trong jQuery thực hiện một hiệu ứng custom của một tập các thuộc tính CSS.
Cú pháp
Sau đây là cú pháp cho animate() trong jQuery:
selector.animate( params, [duration, easing, callback] );
Tham số
Dưới đây miêu tả chi tiết về các tham số được sử dụng trong phương thức animate() trong jQuery:
params − Một map các thuộc tính CSS mà hiệu ứng sẽ di chuyển theo nó.
duration − Đây là tham số tùy ý biểu diễn hiệu ứng sẽ chạy bao lâu.
easing − Đây là tham số tùy ý biểu diễn hàm easing nào được sử dụng để chuyển tiếp
callback − Đây là tham số tùy ý biểu diễn một hàm để gọi một khi hiệu ứng hoàn thành.
Ví dụ
Sau đây là ví dụ đơn giản minh họa cách sử dụng của phương thức animate() trong jQuery:
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#out").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
$("#in").click(function(){
$("#block").animate({
width: "100",
opacity: 1.0,
marginLeft: "0in",
fontSize: "100%",
borderWidth: "1px"
}, 1500 );
});
});
</script>
<style>
div {background-color:#bca; width:100px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="out"> Animate Out </button>
<button id="in"> Animate In</button>
<div id="block">Hello</div>
</body>
</html>
Nó sẽ cho kết quả:
Công cụ giáo viên (2048.VN)
Tạo- trộn đề thi miễn phí từ file PDF, Word, Giao bài nhanh chóng, Hoàn toàn Free
Các bài học jQuery khác tại VietJack:
Dành cho bạn
Công cụ giáo viên
- Tạo đề online từ PDF / Word
- Trộn nhiều mã đề, in Offline
- Giao bài online, Quản lí lớp học
