Hiệu ứng jQuery - Hoạt hình
Với jQuery, bạn có thể tạo hoạt ảnh tùy chỉnh.
Ảnh động jQuery - Phương thức animate()
Phương thức jQuery animate() được sử dụng để tạo hoạt ảnh tùy chỉnh.
Cú pháp:
$( selector ).animate({ params } ,speed,callback );Tham số params bắt buộc xác định các thuộc tính CSS sẽ hoạt hình.
Tham số tốc độ tùy chọn chỉ định thời lượng của hiệu ứng. Nó có thể nhận các giá trị sau: "chậm", "nhanh" hoặc mili giây.
Tham số gọi lại tùy chọn là một hàm được thực thi sau khi hoạt ảnh hoàn tất.
Ví dụ sau minh họa cách sử dụng đơn giản của phương thức animate() ; nó di chuyển phần tử <div> sang bên phải, cho đến khi nó đạt đến thuộc tính bên trái là 250px:
Theo mặc định, tất cả các phần tử HTML đều có vị trí tĩnh và không thể di chuyển được.
Để thao tác vị trí, trước tiên hãy nhớ đặt thuộc tính vị trí CSS của phần tử thành tương đối, cố định hoặc tuyệt đối!
jQuery animate() - Thao tác nhiều thuộc tính
Lưu ý rằng nhiều thuộc tính có thể được tạo hoạt ảnh cùng một lúc:
Ví dụ
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Hãy tự mình thử » Có thể thao tác TẤT CẢ các thuộc tính CSS bằng phương thức animate() không?
Có gần như! Tuy nhiên, có một điều quan trọng cần nhớ: tất cả các tên thuộc tính phải được đặt trong vỏ lạc đà khi sử dụng với phương thức animate(): Bạn sẽ cần phải viết phần đệmLeft thay vì phần đệm bên trái, phần lề phải thay vì phần lề phải, v.v.
Ngoài ra, hoạt ảnh màu không có trong thư viện jQuery cốt lõi.
Nếu bạn muốn tạo hiệu ứng màu động, bạn cần tải xuống plugin Color Animations từ jQuery.com.
jQuery animate() - Sử dụng các giá trị tương đối
Cũng có thể xác định các giá trị tương đối (giá trị khi đó tương đối với giá trị hiện tại của phần tử). Điều này được thực hiện bằng cách đặt += hoặc -= trước giá trị:
Ví dụ
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Hãy tự mình thử »jQuery animate() - Sử dụng các giá trị được xác định trước
Bạn thậm chí có thể chỉ định giá trị hoạt ảnh của thuộc tính là " show ", " hide " hoặc " toggle ":
jQuery animate() - Sử dụng chức năng xếp hàng
Theo mặc định, jQuery có chức năng xếp hàng cho hoạt ảnh.
Điều này có nghĩa là nếu bạn viết nhiều lệnh gọi animate() nối tiếp nhau, jQuery sẽ tạo một hàng đợi "nội bộ" với các lệnh gọi phương thức này. Sau đó, nó chạy các cuộc gọi animate từng MỘT.
Vì vậy, nếu bạn muốn thực hiện các hoạt ảnh khác nhau nối tiếp nhau, chúng tôi tận dụng chức năng xếp hàng:
ví dụ 1
$("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");
});
Hãy tự mình thử » Ví dụ bên dưới trước tiên di chuyển phần tử <div> sang phải, sau đó tăng kích thước phông chữ của văn bản:
Ví dụ 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Hãy tự mình thử »bài tập jQuery
Tham khảo hiệu ứng jQuery
Để có cái nhìn tổng quan đầy đủ về tất cả các hiệu ứng jQuery, vui lòng truy cập Tài liệu tham khảo về hiệu ứng jQuery của chúng tôi.
