JqueryUI - Hiệu ứng
Chương này sẽ thảo luận về effect(), là một trong những phương pháp được sử dụng để quản lý hiệu ứng hình ảnh jQueryUI. Phương thức effect () áp dụng hiệu ứng hoạt hình cho các phần tử mà không cần phải hiển thị hoặc ẩn nó.
Cú pháp
Các effect() phương thức có cú pháp sau:
.effect( effect [, options ] [, duration ] [, complete ] )| Sr.No. | Mô tả về Thông Số |
|---|---|
| 1 | effect Đây là một Chuỗi cho biết hiệu ứng nào sẽ sử dụng cho quá trình chuyển đổi. |
| 2 | options Đây là kiểu Object và chỉ ra các thiết lập hiệu ứng cụ thể và nới lỏng . Ngoài ra, mỗi hiệu ứng có một bộ tùy chọn riêng có thể được chỉ định chung cho nhiều hiệu ứng được mô tả trong bảng Hiệu ứng jQueryUI . |
| 3 | duration Đây là loại Number hoặc String và cho biết số mili giây của hiệu ứng. Giá trị mặc định của nó là 400 . |
| 4 | complete Đây là một phương thức gọi lại được gọi cho mỗi phần tử khi hiệu ứng hoàn tất cho phần tử này. |
Hiệu ứng jQueryUI
Bảng sau đây mô tả các hiệu ứng khác nhau có thể được sử dụng với phương thức Effects () -
| Sr.No. | Hiệu ứng & Mô tả |
|---|---|
| 1 | blind Hiển thị hoặc ẩn phần tử theo cách của màn che cửa sổ: bằng cách di chuyển cạnh dưới lên hoặc xuống, hoặc cạnh phải sang phải hoặc trái, tùy thuộc vào hướng và chế độ đã chỉ định . |
| 2 | bounce Làm cho phần tử xuất hiện bật lên theo hướng dọc hoặc ngang, tùy chọn hiển thị hoặc ẩn phần tử. |
| 3 | clip Hiển thị hoặc ẩn phần tử bằng cách di chuyển các đường viền đối diện của phần tử lại với nhau cho đến khi chúng gặp nhau ở giữa hoặc ngược lại. |
| 4 | drop Hiển thị hoặc ẩn phần tử bằng cách làm cho phần tử có vẻ như thả vào hoặc thoát ra khỏi trang. |
| 5 | explode Hiển thị hoặc ẩn phần tử bằng cách chia nó thành nhiều mảnh di chuyển theo hướng xuyên tâm như thể phát nổ vào hoặc phát nổ từ trang. |
| 6 | fade Hiển thị hoặc ẩn phần tử bằng cách điều chỉnh độ mờ của nó. Điều này cũng giống như các hiệu ứng mờ dần cốt lõi, nhưng không có tùy chọn. |
| 7 | fold Hiển thị hoặc ẩn phần tử bằng cách điều chỉnh các đường viền đối diện trong hoặc ngoài, sau đó thực hiện tương tự đối với tập hợp các đường viền khác. |
| số 8 | highlight Kêu gọi sự chú ý đến phần tử bằng cách thay đổi ngay màu nền của nó trong khi hiển thị hoặc ẩn phần tử. |
| 9 | puff Mở rộng hoặc thu nhỏ phần tử tại chỗ trong khi điều chỉnh độ mờ của nó. |
| 10 | pulsate Điều chỉnh độ mờ của phần tử bật và tắt trước khi đảm bảo rằng phần tử được hiển thị hoặc ẩn như đã chỉ định. |
| 11 | scale Mở rộng hoặc thu nhỏ phần tử theo một tỷ lệ phần trăm cụ thể. |
| 12 | shake Lắc phần tử qua lại, theo chiều dọc hoặc chiều ngang. |
| 13 | size Thay đổi kích thước phần tử thành chiều rộng và chiều cao được chỉ định. Tương tự như quy mô ngoại trừ cách kích thước mục tiêu được chỉ định. |
| 14 | slide Di chuyển phần tử sao cho phần tử có vẻ như trượt lên hoặc ra khỏi trang. |
| 15 | transfer Hoạt ảnh một phần tử phác thảo tạm thời làm cho phần tử dường như chuyển sang phần tử khác. Sự xuất hiện của phần tử phác thảo phải được xác định thông qua các quy tắc CSS cho lớp ui-Effects-transfer, hoặc lớp được chỉ định dưới dạng tùy chọn. |
Ví dụ
Các ví dụ sau minh họa việc sử dụng phương thức effect () với các hiệu ứng khác nhau được liệt kê trong bảng trên.
Hiệu ứng - Lắc
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI effect Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
#box-1 {
height: 100px;
width: 100px;
background: #b9cd6d;
}
</style>
<script>
$(document).ready(function() {
$('#box-1').click(function() {
$( "#box-1" ).effect( "shake", {
times: 10,
distance: 100
}, 3000, function() {
$( this ).css( "background", "#cccccc" );
});
});
});
</script>
</head>
<body>
<div id = "box-1">Click On Me</div>
</body>
</html>Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML effectexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -
Hiệu ứng - phát nổ
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI effect Example</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
#box-2 {
height: 100px;
width: 100px;
background: #b9cd6d;
}
</style>
<script>
$(document).ready(function() {
$('#box-2').click(function() {
$( "#box-2" ).effect({
effect: "explode",
easing: "easeInExpo",
pieces: 4,
duration: 5000
});
});
});
</script>
</head>
<body>
<div id="box-2"></div>
</body>
</html>Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML effectexample.htmvà mở nó trong trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -