Bài viết hôm nay sẽ giới thiệu đến các bạn một phương thức được sử dụng rất thường xuyên trong việc tạo hiệu ứng bằng jQuery. Đó là sử dụng phương thức
animate() để tạo ra sự chuyển động, hoặc thay đổi cho phần tửCác bạn đang xem bài viết thuộc bài học về jQuery Effects - hiệu ứng jQuery
Khái niêm về phương thức jQuery animate() và cú pháp
Ví dụ Bấm vào button dưới đây để xem hiệu ứng thay đổi kích thước của hình ảnh
LaiXe.Xyz
Phương thức animate() trong jQuery dùng để thực hiện hiệu ứng chuyển động bằng cách thay đổi các thuộc tính CSS.Các thuộc tính CSS sẽ được thay đổi dần dần, từ thuộc tính này sang thuộc tính khác, đó cũng là cách thức để tạo ra hiệu ứng, giống như 2 ví dụ ở trên đã đề cập.
Chỉ các giá trị số có thể được làm động (như
margin: 30px). Các giá trị chuỗi không thể tạo hiệu ứng bằng phương thức animate() (như background-color:red), ngoại trừ các chuỗi "show", "hide" và "toggle". Các giá trị này cho phép ẩn và hiển thị phần tử được tạo hiệu ứng animateMẹo: Sử dụng "+=" hoặc "-=" cho việc tăng dần, hoặc giảm dần hiệu ứng.
Syntax
Phương thức animate() trong jQuery có cú pháp
(selector).animate({styles},speed,easing,callback)
| Tham số / Parameter | Mô tả |
|---|---|
| styles | Bắt buộc. Dùng để chỉ định một hoặc nhiều thuộc tính / giá trị CSS để tạo hiệu ứng. Lưu ý: Các thuộc tính CSS có dấu gạch ngang ở giữa như padding-left. chúng ta loại bỏ dấu gạch ngang, viết hoa chữ đầu tiên sau đó và nối vào, cụ thể sẽ ghi lại là paddingLeft
Những thuộc tính CSS có thể áp dụng được phương thức animate()
|
| selector | Đây là bộ chọn jQuery để xác định phần tử hoặc những phần tử được chọn |
| speed | Không bắt buộc. Dùng để chỉ định tốc độ của hiệu ứng animate. (Giá trị mặc định là 400 milliseconds) Giá trị có thể được sử dụng:
|
| easing | Không bắt buộc. Dùng để chỉ định tốc độ của phần tử trong các điểm khác nhau của sự chuyển động.(Giá trị mặc định là "swing") Giá trị có thể được sử dụng:
|
| callback | Không bắt buộc. Dùng để thực thi một hàm sau khi phương thức animate() hoàn thành.jQuery Callback sẽ được đề cập rõ hơn trong bài học sau |
Alternate Syntax - Cú pháp khác
Ngoài ra phương thức animate() trong jQuery còn có cú pháp
(selector).animate({styles},{options})
| Tham số / Parameter | Mô tả |
|---|---|
| styles | Bắt buộc. Dùng để chỉ định một hoặc nhiều thuộc tính / giá trị CSS để tạo hiệu ứng. (Tương tự như ở trên) |
| options | Không bắt buộc. Dùng để chỉ định những lựa chọn bổ sung cho hiệu ứng với các giá trị có thể thêm vào sau đây:
|
jQuery animate() - Thao tác với nhiều thuộc tính
Mặc định, tất cả các phần tử HTML có thuộc tính CSS position (vị trí) làposition:static và không thể di chuyển. Để thao tác về vị trí, trước tiên hãy nhớ đặt thuộc tính position CSS của phần tử là relative, fixed, hoặc absolute nhé các bạn!
Ví dụ
Dùng phương thứcanimate() với nhiều thuộc tính CSS
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px',
paddingLeft: '20px',
});
});
padding-left được chuyển thành paddingLeft
jQuery animate() - sử dụng giá trị tương đối
Sử dụng giá trị tương đối, khi bạn muốn tăng dần hoặc giảm dần khi hiệu ứng được thực thi bằng cách sử dụng+= hoặc -=
Ví dụ
Dùng phương thứcanimate() với giá trị tăng tương đối
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate () - Sử dụng các giá trị được xác định trước
Sử dụng các chuỗi"show", "hide" và "toggle" trong phương thức animate()
Ví dụ
Dùng phương thứcanimate() với giá trị "toggle"
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
Ví dụ về hiệu ứng được tạo từ phương thức animate()
Ví dụ
Dùng phương thứcanimate() để thay đổi chiều cao cho phần tử
$("button").click(function(){
$("#box").animate({height: "300px"});
});
Ví dụ
Dùng phương thứcanimate() với callback function để lặp lại hiệu ứng
$("button").click(function(){
var div = $("div");
startAnimation();
function startAnimation(){
div.animate({height: 300}, "slow");
div.animate({width: 300}, "slow");
div.css("background-color", "blue");
div.animate({height: 100}, "slow");
div.animate({width: 100}, "slow", startAnimation);
}
});
Ví dụ
Dùng phương thứcanimate() với cú pháp thay thế
$("#btn").click(function(){
$("#box").animate({
height: "300px",
width: "300px"
}, {
duration: 5000,
easing: "linear",
complete: function(){
$(this).after("<p>Hiệu ứng Animation hoàn thành!</p>");
}
});
});
Ví dụ
Dùng phương thứcanimate() để tạo thanh Progress Bar (thanh tiến trình)
$("#btn").click(function(){
$("#box").animate({
width: "400px"
}, {
duration: 5000,
easing: "linear",
step: function(x) {
$("#demo").text(Math.round(x * 100 / 400) + "%");
}
});
});
Ví dụ
Dùng phương thứcanimate() để tạo thanh hiệu ứng cuộn khi bấm vào link
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
<style>
body, html, .main {
height: 100%;
}
section {
min-height: 100%;
}
</style>
</head>
<body>
<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<div class="main">
<section></section>
</div>
<div class="main" id="section2">
<section style="background-color:blue"></section>
</div>
</body>
</html>
