Thứ Sáu, 7 tháng 3, 2014
jQuery Animate
«Trở lại
Chương tiếp theo »
Phương pháp jQuery animate () cho phép bạn tạo hình động tùy chỉnh.
jQuery
jQuery Ảnh động - Các animate () Phương pháp
Phương pháp jQuery animate () được sử dụng để tạo ra hình ảnh động tùy chỉnh.
Cú pháp:
$(selector).animate({params},speed,callback);
Tham số params cần định nghĩa các thuộc tính CSS được hoạt hình.
Các thông số tốc độ tùy chọn xác định thời gian hiệu lực. Nó có thể mất các giá trị sau: "chậm", "nhanh", hoặc mili giây.
Các tham số gọi lại tùy chọn là một chức năng được thực hiện sau khi các hình ảnh động hoàn tất.
Ví dụ sau đây cho thấy việc sử dụng đơn giản của phương pháp () animate, nó di chuyển một yếu tố <div> bên phải, cho đến khi nó đã đạt đến một tài sản bên trái của 250px:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
Thử nó cho mình »
 | Theo mặc định, tất cả các phần tử HTML có một vị trí tĩnh, và không thể di chuyển. Để thao tác vị trí, hãy nhớ đầu tiên thiết lập thuộc tính CSS vị trí của phần tử tương đối, cố định, hoặc tuyệt đối! |
|---|
jQuery animate () - Thao tác Nhiều tính
Chú ý rằng nhiều tài sản có thể được hoạt hình cùng một lúc:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
Thử nó cho mình »
| Là nó có thể thao tác tất cả các thuộc tính CSS với animate () phương pháp? Có, hầu như! Tuy nhiên, có một điều quan trọng cần nhớ: tất cả các tên tài sản phải được lạc đà hoa chữ cái khi được sử dụng với animate (phương pháp): Bạn sẽ cần phải viết paddingLeft thay vì padding-left, marginRight thay vì margin-right, và như vậy. Ngoài ra, phim hoạt hình màu không có trong thư viện jQuery lõi. Nếu bạn muốn sinh động màu sắc, bạn cần phải tải về các plugin Màu động từ jQuery.com. |
|---|
jQuery animate () - Sử dụng giá trị tương đối
Nó cũng có thể xác định giá trị tương đối (giá trị là sau đó so với giá trị hiện tại của phần tử). Này được thực hiện bằng cách đặt + = hoặc - = trước giá trị:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
Thử nó cho mình »
jQuery animate () - Sử dụng giá trị xác định trước
Bạn thậm chí có thể xác định giá trị hình ảnh động của một bất động sản như "hiển thị", "ẩn", hoặc "chuyển đổi":
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
Thử nó cho mình »
Sử dụng chức năng xếp hàng - jQuery animate ()
Theo mặc định, jQuery đi kèm với chức năng xếp hàng cho hình ảnh động.
Điều này có nghĩa rằng nếu bạn viết nhiều animate () gọi sau mỗi khác, jQuery tạo ra một hàng đợi "nội bộ" với các cuộc gọi phương pháp. Sau đó, nó chạy animate gọi từng người một.
Vì vậy, nếu bạn muốn thực hiện hình ảnh động khác nhau sau mỗi khác, chúng tôi tận dụng lợi thế của các chức năng đợi:
Ví dụ 1
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
Thử nó cho mình »
Ví dụ dưới đây đầu tiên di chuyển các yếu tố <div> bên phải, và sau đó làm tăng kích thước font chữ của văn bản:
Ví dụ 2
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
Thử nó cho mình »
«Trở lại
Chương tiếp theo »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét